61 |
63 | }
64 | }
65 |
66 | export default Sample;
67 |
--------------------------------------------------------------------------------
/docs/FamilyChartItemsOrdering.md:
--------------------------------------------------------------------------------
1 | # Family Items Ordering
2 | The family diagram supports multiple parents and children per node, so there is no way to define groups of items and their order in the group. The family diagram provides API options helping to guide the layout engine to order nodes. That means if items expected to be in one layout group, then the developer can use the following properties to guide the layout engine about user preferred relative order of items:
3 |
4 | * `relativeItem` - item position and placement type defined relative to the node referenced by this property
5 | * `placementType` - this property defines placement on the left or right side of the relative item. The property has the following values:
6 | * `AdviserPlacementType.Left`
7 | * `AdviserPlacementType.Right`
8 | * `position` - if several items reference the same relative item and relative offset, then this property defines the order of them.
9 |
10 | If the item has no relative node defined, then the layout engine will try to find optimal placement based on its relations.
11 |
12 | Please, pay attention that control ignores looped references between nodes, so it is the developer's responsibility to avoid them.
13 |
14 | ## Family Items Ordering Sample
15 |
16 | [React](../src/Samples/FamilyChartItemsOrdering.jsx)
17 |
18 | ## Multiple Families Ordering Sample
19 |
20 | [React](../src/Samples/MultipleFamiliesOrdering.jsx)
21 |
22 | ## Primary Parent
23 |
24 | If a node has multiple parents and belongs to distant branches of the diagram, then the `primaryParent` property can give higher priority to one of them. So the control would place the node to the hierarchy of that primary parent.
25 |
26 | * `primaryParent` - defines the primary parent of the node. The control would place the node into the hierarchy of the primary node. If there is no parent found, then the layout engine will ignore it.
27 |
28 | [React](../src/Samples/FamilyChartPrimaryParent.jsx)
--------------------------------------------------------------------------------
/docs/InactiveItems.md:
--------------------------------------------------------------------------------
1 | # Inactive family items
2 | Inactive items are regular items excluded from the navigation. End-user cannot click on them and move the cursor to them. In the auto fit mode, selecting the neighboring node next to the inactive item makes all nodes of the inactive item visible. The inactive items play a role in layout annotations having no user interaction and templated with HTML the same way as other diagram nodes. For example, we can add titles into family diagram layout to separate groups of nodes. We can add inactive terminator items indicating that the diagram would load extra nodes into the structure upon reaching them.
3 |
4 | Control provides two ways to make nodes inactive. The first one is to set the `isActive` property of the node to false. The other one is more generic. It is where we make all nodes having some particular template inactive. An adequately structured application should have some item templates, so making stationery items with template options is the most appropriate.
5 |
6 | See following configuration classes:
7 |
8 | * `FamItemConfig`
9 | * `TemplateConfig`
10 |
11 | They have the following option:
12 |
13 | * `isActive` - Setting it to false makes items inactive in diagram layout, so they become irresponsive to mouse and keyboard navigation events.
14 |
15 | If you need to disable controls interactivity, it provides global scope options to disable mouse highlights and cursor navigation.
16 |
17 | ```JavaScript
18 | import { OrgDiagram } from basicprimitivesreact;
19 |
59 |
61 | }
62 | }
63 |
64 | export default Sample;
65 |
--------------------------------------------------------------------------------
/src/Samples/HighlightPathAnnotation.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { OrgDiagram } from '../Diagrams';
3 | import { AnnotationType, Colors, Enabled, LineType, GroupByType, PageFitMode } from 'basicprimitives';
4 |
5 | class Sample extends Component {
6 | render() {
7 | const config = {
8 | items: [
9 | { id: 0, parent: null, title: "James Smith", description: "VP, Public Sector", image: "./photos/a.png" },
10 | { id: 1, parent: 0, title: "Ted Lucas", description: "VP, Human Resources", image: "./photos/b.png" },
11 | { id: 2, parent: 0, title: "Fritz Stuger", description: "Business Solutions, US", image: "./photos/c.png" },
12 | { id: 3, parent: 0, title: "Mike Wazowski", description: "Business Analyst, Canada", image: "./photos/o.png" },
13 | { id: 4, parent: 3, title: "Edward Smith", description: "Field Engineer", image: "./photos/s.png" },
14 | { id: 5, parent: 1, title: "Doug Parker", description: "Field Engineer", image: "./photos/p.png" }
15 | ],
16 | annotations: [
17 | {
18 | annotationType: AnnotationType.HighlightPath,
19 | items: [5, 0],
20 | color: Colors.Navy,
21 | lineWidth: 12,
22 | opacity: 0.3,
23 | showArrows: false
24 | },
25 | {
26 | annotationType: AnnotationType.HighlightPath,
27 | items: [4, 0],
28 | color: Colors.Red,
29 | lineWidth: 2,
30 | opacity: 1,
31 | showArrows: true
32 | }
33 | ],
34 | cursorItem: 0,
35 | hasSelectorCheckbox: Enabled.True,
36 | highlightLinesColor: Colors.Red,
37 | highlightLinesWidth: 1.5,
38 | highlightLinesType: LineType.Dashed,
39 | arrowsDirection: GroupByType.Parents,
40 | pageFitMode: PageFitMode.None
41 | };
42 |
43 | return
44 |
46 | }
47 | }
48 |
49 | export default Sample;
50 |
--------------------------------------------------------------------------------
/docs/InactiveFamilyItems.md:
--------------------------------------------------------------------------------
1 | # Inactive family items
2 | Inactive items are regular items excluded from the navigation. End-user cannot click on them and move the cursor to them. In the auto fit mode, selecting the neighboring node next to the inactive item makes all nodes of the inactive item visible. The inactive items play a role in layout annotations having no user interaction and templated with HTML the same way as other diagram nodes. For example, we can add titles into family diagram layout to separate groups of nodes. We can add inactive terminator items indicating that the diagram would load extra nodes into the structure upon reaching them.
3 |
4 | Control provides two ways to make nodes inactive. The first one is to set the `isActive` property of the node to false. The other one is more generic. It is where we make all nodes having some particular template inactive. An adequately structured application should have some item templates, so making stationery items with template options is the most appropriate.
5 |
6 | See following configuration classes:
7 |
8 | * `FamItemConfig`
9 | * `TemplateConfig`
10 |
11 | They have the following option:
12 |
13 | * `isActive` - Setting it to false makes items inactive in diagram layout, so they become irresponsive to mouse and keyboard navigation events.
14 |
15 | If you need to disable controls interactivity, it provides global scope options to disable mouse highlights and cursor navigation.
16 |
17 | ```JavaScript
18 | import { FamDiagram } from basicprimitivesreact;
19 |
59 |
61 | }
62 | }
63 |
64 | export default Sample;
65 |
--------------------------------------------------------------------------------
/src/Samples/FirstFamilyChart.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { FamDiagram } from '../Diagrams';
3 | import { PageFitMode, Enabled, GroupByType } from 'basicprimitives';
4 |
5 | class Sample extends Component {
6 | render() {
7 | const config = {
8 | pageFitMode: PageFitMode.None,
9 | cursorItem: 2,
10 | linesWidth: 1,
11 | linesColor: "black",
12 | hasSelectorCheckbox: Enabled.True,
13 | normalLevelShift: 20,
14 | dotLevelShift: 20,
15 | lineLevelShift: 20,
16 | normalItemsInterval: 10,
17 | dotItemsInterval: 30,
18 | lineItemsInterval: 30,
19 | arrowsDirection: GroupByType.Parents,
20 | showExtraArrows: false,
21 | items: [
22 | { id: 1, title: "Thomas Williams", label: "Thomas Williams", description: "1st husband", image: "./photos/t.png" },
23 | { id: 2, title: "Mary Spencer", label: "Mary Spencer", description: "The Mary",image: "./photos/m.png" },
24 | { id: 3, title: "David Kirby", label: "David Kirby", description: "2nd Husband", image: "./photos/d.png" },
25 | { id: 4, parents: [1, 2], title: "Brad Williams", label: "Brad Williams", description: "1st son", image: "./photos/b.png" },
26 | { id: 5, parents: [2, 3], title: "Mike Kirby", label: "Mike Kirby", description: "2nd son, having 2 spouses", image: "./photos/m.png"},
27 | { id: 6, title: "Lynette Maloney", label: "Lynette Maloney", description: "Spouse I", image: "./photos/m.png" },
28 | { id: 11, parents: [5, 6], title: "Steven Powell", label: "Steven Powell", description: "1st son", image: "./photos/s.png" },
29 | { id: 7, title: "Sara Kemp", label: "Sara Kemp", description: "Spouse II", image: "./photos/s.png" },
30 | { id: 12, parents: [5, 7], title: "John Smith", label: "John Smith", description: "2ns son", image: "./photos/j.png" },
31 | { id: 8, parents: [7], title: "Leon Kemp", label: "Leon Kemp", description: "", image: "./photos/l.png" }
32 | ]
33 | };
34 |
35 | return
36 |
38 | }
39 | }
40 |
41 | export default Sample;
42 |
--------------------------------------------------------------------------------
/docs/CustomLayoutWithInvisibleItems.md:
--------------------------------------------------------------------------------
1 | # Custom layout with Invisible items
2 | The logical parent-children relations between items define chart navigation. When we select the new cursor item, all its children and parents become visible in the diagram so that the user can continue navigation further down or up in the hierarchy. When children or parents are invisible, we display children of children and parents of parents. This feature, combined with custom item types and children layouts, provides excellent flexibility for the custom children's configurations.
3 |
4 | The following example demonstrates how to use invisible items to arrange children attached to one parent item into multiple groups. It has two rows of assistants and two levels of children. To implement this layout, we create two hidden nodes of the regular item type. Set the `isVisible` property of the item configuration object to false to make the node invisible. Children of invisible items logically belong to their parents. In our case, it is the organizational chart's root item. When we set the cursor to the root node, all items in the diagram become logical children of the root node and visible. So the end-user may move the cursor to them directly.
5 |
6 | ```JavaScript
7 | import { OrgDiagram } from basicprimitivesreact;
8 |
22 |
;
24 | }
25 | }],
26 | items: [
27 | {
28 | id: 0,
29 | parent: null,
30 | title: "James Smith",
31 | description: "VP, Public Sector",
32 | image: "./photos/a.png",
33 | phone: "(123) 456-78-90",
34 | email: "itema@org.com",
35 | badge: "1",
36 | badgeColor: "blue"
37 | },
38 | {
39 | id: 1,
40 | parent: 0,
41 | title: "Ted Lucas",
42 | description: "VP, Human Resources",
43 | image: "./photos/b.png",
44 | badge: "2",
45 | badgeColor: "red"
46 | },
47 | {
48 | id: 2,
49 | parent: 0,
50 | title: "Fritz Stuger",
51 | phone: "(123) 654-78-90",
52 | email: "itemc@org.com",
53 | description: "Business Solutions, US",
54 | image: "./photos/c.png",
55 | badge: "3",
56 | badgeColor: "green"
57 | }
58 | ]
59 | };
60 |
61 | return {itemConfig.badge}
23 |
62 |
65 | }
66 | }
67 |
68 | export default Sample;
69 |
--------------------------------------------------------------------------------
/docs/DragNDrop.md:
--------------------------------------------------------------------------------
1 | # Drag & Drop Support
2 |
3 | Our React diagramming components library is compliant with [React Context](https://reactjs.org/docs/context.html) and [React Drag & Drop](http://react-dnd.github.io/react-dnd/about). The only option to achieve this is to render all content using React Virtual DOM without direct DOM manipulations.
4 |
5 | In the best software engineering traditions, our library does not implement any Drag & Drop related functionally. Everything as before is achieved via item templates customizations.
6 |
7 | See [React Drag & Drop](http://react-dnd.github.io/react-dnd/about) library for reference and samples
8 |
9 | ## npm packages
10 | * [react-dnd](https://www.npmjs.com/package/react-dnd)
11 | * [react-dnd-cjs](https://www.npmjs.com/package/react-dnd-html5-backend)
12 |
13 | ## React `DndProvider` does not support nested `backend`s
14 | If you use Drag and Drop in multiple places of your application, be aware that `DndProvider` does not support nested backends.
15 |
16 | ```JavaScript
17 | import React, { Component } from 'react';
18 | import { App } from './App';
19 | import { DndProvider } from 'react-dnd';
20 | import HTML5Backend from 'react-dnd-html5-backend';
21 |
22 | class Sample extends Component {
23 | render() {
24 | return <>
25 |
20 |
;
26 | }
27 | }],
28 | items: [
29 | {
30 | id: 0,
31 | parent: null,
32 | title: "James Smith",
33 | description: "VP, Public Sector",
34 | image: "./photos/a.png",
35 | phone: "(123) 456-78-90",
36 | email: "itema@org.com",
37 | badge: "1",
38 | badgeColor: "blue"
39 | },
40 | {
41 | id: 1,
42 | parent: 0,
43 | title: "Ted Lucas",
44 | description: "VP, Human Resources",
45 | image: "./photos/b.png",
46 | badge: "2",
47 | badgeColor: "red"
48 | },
49 | {
50 | id: 2,
51 | parent: 0,
52 | title: "Fritz Stuger",
53 | phone: "(123) 654-78-90",
54 | email: "itemc@org.com",
55 | description: "Business Solutions, US",
56 | image: "./photos/c.png",
57 | badge: "3",
58 | badgeColor: "green"
59 | }
60 | ]
61 | };
62 |
63 | return
21 |
25 |
22 | {itemConfig.badge}
23 |
24 |
64 |
67 | }
68 | }
69 |
70 | export default Sample;
71 |
--------------------------------------------------------------------------------
/src/Samples/AdviserPartnerItemType.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { OrgDiagram } from '../Diagrams';
3 | import { AdviserPlacementType, ItemType, Enabled, GroupByType, PageFitMode } from 'basicprimitives';
4 |
5 | class Sample extends Component {
6 | render() {
7 | const config = {
8 | pageFitMode: PageFitMode.None,
9 | cursorItem: 0,
10 | highlightItem: 0,
11 | arrowsDirection: GroupByType.Parents,
12 | hasSelectorCheckbox: Enabled.True,
13 | items: [
14 | {
15 | id: 0,
16 | parent: null,
17 | title: "James Smith",
18 | description: "VP, Public Sector",
19 | image: "./photos/a.png"
20 | },
21 | {
22 | id: 1,
23 | parent: 0,
24 | title: "Robert Canon",
25 | description: "Adviser Partner",
26 | image: "./photos/z.png",
27 | itemType: ItemType.AdviserPartner,
28 | adviserPlacementType: AdviserPlacementType.Right,
29 | groupTitle: "Partner"
30 | },
31 | {
32 | id: 2,
33 | parent: 0,
34 | title: "Fritz Stuger",
35 | description: "Adviser Partner item",
36 | image: "./photos/y.png",
37 | itemType: ItemType.AdviserPartner,
38 | adviserPlacementType: AdviserPlacementType.Left,
39 | groupTitle: "Partner"
40 | },
41 | {
42 | id: 3,
43 | parent: 0,
44 | title: "Ted Lucas",
45 | description: "VP, Human Resources",
46 | image: "./photos/b.png"
47 | },
48 | {
49 | id: 4,
50 | parent: 3,
51 | title: "Robert Canon 2",
52 | description: "Adviser Partner item",
53 | image: "./photos/z.png",
54 | itemType: ItemType.AdviserPartner,
55 | adviserPlacementType: AdviserPlacementType.Right,
56 | groupTitle: "Partner"
57 | },
58 | {
59 | id: 5,
60 | parent: 3,
61 | title: "Ted Lucas 2",
62 | description: "VP, Human Resources",
63 | image: "./photos/b.png"
64 | }
65 | ]
66 | };
67 |
68 | return
69 |
71 | }
72 | }
73 |
74 | export default Sample;
75 |
--------------------------------------------------------------------------------
/src/Samples/GeneralPartnerItemType.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { OrgDiagram } from '../Diagrams';
3 | import { PageFitMode, GroupByType, Enabled, ItemType, AdviserPlacementType } from 'basicprimitives';
4 |
5 | class Sample extends Component {
6 | render() {
7 | const config = {
8 | pageFitMode: PageFitMode.None,
9 | cursorItem: 0,
10 | highlightItem: 0,
11 | arrowsDirection: GroupByType.Parents,
12 | hasSelectorCheckbox: Enabled.True,
13 | items: [
14 | {
15 | id: 0,
16 | parent: null,
17 | title: "James Smith",
18 | description: "VP, Public Sector",
19 | image: "./photos/a.png"
20 | },
21 | {
22 | id: 1,
23 | parent: 0,
24 | title: "Robert Canon",
25 | description: "General Partner",
26 | image: "./photos/z.png",
27 | itemType: ItemType.GeneralPartner,
28 | adviserPlacementType: AdviserPlacementType.Right,
29 | groupTitle: "Partner"
30 | },
31 | {
32 | id: 2,
33 | parent: 0,
34 | title: "Fritz Stuger",
35 | description: "General Partner item",
36 | image: "./photos/y.png",
37 | itemType: ItemType.GeneralPartner,
38 | adviserPlacementType: AdviserPlacementType.Left,
39 | groupTitle: "Partner"
40 | },
41 | {
42 | id: 3,
43 | parent: 0,
44 | title: "Ted Lucas",
45 | description: "VP, Human Resources",
46 | image: "./photos/b.png"
47 | },
48 | {
49 | id: 4,
50 | parent: 3,
51 | title: "Robert Canon 2",
52 | description: "General Partner item",
53 | image: "./photos/z.png",
54 | itemType: ItemType.GeneralPartner,
55 | adviserPlacementType: AdviserPlacementType.Right,
56 | groupTitle: "Partner"
57 | },
58 | {
59 | id: 5,
60 | parent: 3,
61 | title: "Ted Lucas 2",
62 | description: "VP, Human Resources",
63 | image: "./photos/b.png"
64 | }
65 | ]
66 | };
67 |
68 | return
69 |
71 | }
72 | }
73 |
74 | export default Sample;
75 |
--------------------------------------------------------------------------------
/src/Samples/MatrixGroupsInFamilyChart.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { FamDiagram } from '../Diagrams';
3 | import { Enabled, GroupByType, PageFitMode } from 'basicprimitives';
4 |
5 | class Sample extends Component {
6 | render() {
7 | const config = {
8 | cursorItem: 1,
9 | enableMatrixLayout: true,
10 | minimumMatrixSize: 3,
11 | hasSelectorCheckbox: Enabled.False,
12 | arrowsDirection: GroupByType.Children,
13 | pageFitMode: PageFitMode.None,
14 | items: [
15 | { id: 1, parents: [], title: "1", label: "1", description: "", image: "./photos/z.png", itemTitleColor: "#ff0000" },
16 | { id: 2, parents: [1, 101, 102, 103], title: "2", label: "2", description: "", image: "./photos/a.png", itemTitleColor: "#ff0000" },
17 | { id: 3, parents: [1, 101, 102, 103], title: "3", label: "3", description: "", image: "./photos/b.png", itemTitleColor: "#ff0000" },
18 | { id: 4, parents: [1, 101, 102, 103], title: "4", label: "4", description: "", image: "./photos/c.png", itemTitleColor: "#ff0000" },
19 | { id: 5, parents: [1, 101, 102, 103], title: "5", label: "5", description: "", image: "./photos/c.png", itemTitleColor: "#ff0000" },
20 | { id: 6, parents: [1, 101, 102, 103], matrixId: "2", title: "6", label: "6", description: "", image: "./photos/e.png", itemTitleColor: "#ff0000" },
21 | { id: 7, parents: [1, 101, 102, 103], matrixId: "2", title: "7", label: "7", description: "", image: "./photos/f.png", itemTitleColor: "#ff0000" },
22 | { id: 8, parents: [1, 101, 102, 103], matrixId: "2", title: "8", label: "8", description: "", image: "./photos/g.png", itemTitleColor: "#ff0000" },
23 | { id: 9, parents: [1, 101, 102, 103], matrixId: "2", title: "10", label: "10", description: "", image: "./photos/i.png", itemTitleColor: "#ff0000" },
24 | { id: 10, parents: [1, 101, 102, 103], addToMatrix: false, title: "10", label: "10", description: "", image: "./photos/i.png", itemTitleColor: "#ff0000" },
25 | { id: 33, parents: [2, 3, 4, 5, 6, 7, 8, 9, 10], title: "33", label: "33", description: "", image: "./photos/m.png", itemTitleColor: "#4b0082" }
26 | ]
27 | };
28 |
29 | return
30 |
32 | }
33 | }
34 |
35 | export default Sample;
36 |
--------------------------------------------------------------------------------
/src/Samples/SelectingCursorItem.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { OrgDiagram } from '../Diagrams';
3 | import { PageFitMode, Enabled } from 'basicprimitives';
4 |
5 | class Sample extends Component {
6 | constructor() {
7 | super();
8 |
9 | this.onCursorChanged = this.onCursorChanged.bind(this);
10 |
11 | this.state = {
12 | config: {
13 | pageFitMode: PageFitMode.FitToPage,
14 | cursorItem: 0,
15 | highlightItem: 0,
16 | hasSelectorCheckbox: Enabled.False,
17 | items: [
18 | {
19 | id: 0,
20 | parent: null,
21 | title: 'James Smith',
22 | description: 'VP, Public Sector',
23 | image: './photos/a.png'
24 | },
25 | {
26 | id: 1,
27 | parent: 0,
28 | title: 'Ted Lucas',
29 | description: 'VP, Human Resources',
30 | image: './photos/b.png'
31 | },
32 | {
33 | id: 2,
34 | parent: 0,
35 | title: 'Fritz Stuger',
36 | description: 'Business Solutions, US',
37 | image: './photos/c.png'
38 | }
39 | ]
40 | },
41 | title: null
42 | }
43 | }
44 |
45 | onCursorChanged(event, data) {
46 | const { context: item } = data;
47 | if (item != null) {
48 | this.setState({
49 | title: item.title
50 | })
51 | }
52 | };
53 |
54 | update(itemid) {
55 | const { config } = this.state;
56 | this.setState({
57 | title: null,
58 | config: {
59 | ...config,
60 | cursorItem: itemid
61 | }
62 | })
63 | }
64 |
65 |
66 | render() {
67 | const { config, title } = this.state;
68 |
69 | return <>
70 | Set cursor to: 71 | 72 | 73 | 74 | 75 |
76 |
77 |
79 | {title != null ? User set cursor to item: {title}
: null} 80 | ; 81 | } 82 | } 83 | 84 | export default Sample; 85 | -------------------------------------------------------------------------------- /src/Samples/SelectingHighlightItem.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { OrgDiagram } from '../Diagrams'; 3 | import { PageFitMode, Enabled } from 'basicprimitives'; 4 | 5 | class Sample extends Component { 6 | constructor() { 7 | super(); 8 | 9 | this.onHighlightChanged = this.onHighlightChanged.bind(this); 10 | 11 | this.state = { 12 | config: { 13 | pageFitMode: PageFitMode.FitToPage, 14 | cursorItem: 0, 15 | highlightItem: 0, 16 | hasSelectorCheckbox: Enabled.False, 17 | items: [ 18 | { 19 | id: 0, 20 | parent: null, 21 | title: 'James Smith', 22 | description: 'VP, Public Sector', 23 | image: './photos/a.png' 24 | }, 25 | { 26 | id: 1, 27 | parent: 0, 28 | title: 'Ted Lucas', 29 | description: 'VP, Human Resources', 30 | image: './photos/b.png' 31 | }, 32 | { 33 | id: 2, 34 | parent: 0, 35 | title: 'Fritz Stuger', 36 | description: 'Business Solutions, US', 37 | image: './photos/c.png' 38 | } 39 | ] 40 | }, 41 | title: null 42 | } 43 | } 44 | 45 | onHighlightChanged(event, data) { 46 | const { context: item } = data; 47 | if (item != null) { 48 | this.setState({ 49 | title: item.title 50 | }) 51 | } 52 | }; 53 | 54 | update(itemid) { 55 | const { config } = this.state; 56 | this.setState({ 57 | title: null, 58 | config: { 59 | ...config, 60 | highlightItem: itemid 61 | } 62 | }) 63 | } 64 | 65 | 66 | render() { 67 | const { config, title } = this.state; 68 | 69 | return <> 70 |Set highlight for: 71 | 72 | 73 | 74 | 75 |
76 |
77 |
79 | {title != null ? User hovers mouse over item {title}
: null} 80 | ; 81 | } 82 | } 83 | 84 | export default Sample; 85 | -------------------------------------------------------------------------------- /src/Diagrams/Schemas/ShapeAnnotationComponentConfigShape.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import { 3 | OrientationType, 4 | LineType, 5 | ShapeType, 6 | PlacementType 7 | } from 'basicprimitives'; // Adjust the import path as needed 8 | 9 | const ThicknessShape = PropTypes.shape({ 10 | left: PropTypes.number.isRequired, 11 | top: PropTypes.number.isRequired, 12 | right: PropTypes.number.isRequired, 13 | bottom: PropTypes.number.isRequired 14 | }); 15 | 16 | const SizeShape = PropTypes.shape({ 17 | width: PropTypes.number.isRequired, 18 | height: PropTypes.number.isRequired 19 | }); 20 | 21 | const RectShape = PropTypes.shape({ 22 | x: PropTypes.number.isRequired, 23 | y: PropTypes.number.isRequired, 24 | width: PropTypes.number.isRequired, 25 | height: PropTypes.number.isRequired 26 | }); 27 | 28 | const ShapeAnnotationControlConfigShape = PropTypes.shape({ 29 | /** 30 | * Diagram orientation. 31 | */ 32 | orientationType: PropTypes.oneOf(Object.values(OrientationType)), 33 | 34 | /** 35 | * Shape type. 36 | */ 37 | shapeType: PropTypes.oneOf(Object.values(ShapeType)), 38 | 39 | /** 40 | * Bounding rectangle. 41 | */ 42 | position: RectShape, 43 | 44 | /** 45 | * Offset of the bounding rectangle. 46 | */ 47 | offset: ThicknessShape, 48 | 49 | /** 50 | * Border line width. 51 | */ 52 | lineWidth: PropTypes.number, 53 | 54 | /** 55 | * Corner radius in % or px. 56 | */ 57 | cornerRadius: PropTypes.oneOfType([ 58 | PropTypes.string, 59 | PropTypes.number 60 | ]), 61 | 62 | /** 63 | * Background color opacity. 64 | */ 65 | opacity: PropTypes.number, 66 | 67 | /** 68 | * Border color. 69 | */ 70 | borderColor: PropTypes.string, 71 | 72 | /** 73 | * Fill color. 74 | */ 75 | fillColor: PropTypes.string, 76 | 77 | /** 78 | * Border line pattern. 79 | */ 80 | lineType: PropTypes.oneOf(Object.values(LineType)), 81 | 82 | /** 83 | * Optional label text. 84 | */ 85 | label: PropTypes.string, 86 | 87 | /** 88 | * Label size. 89 | */ 90 | labelSize: SizeShape, 91 | 92 | /** 93 | * Label placement. 94 | */ 95 | labelPlacement: PropTypes.oneOf(Object.values(PlacementType)), 96 | 97 | /** 98 | * Offset between label and shape. 99 | */ 100 | labelOffset: PropTypes.number 101 | }); 102 | 103 | export default ShapeAnnotationControlConfigShape; 104 | -------------------------------------------------------------------------------- /src/Samples/SelectionPathMode.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { OrgDiagram } from '../Diagrams'; 3 | import { SelectionPathMode, PageFitMode, Enabled } from 'basicprimitives'; 4 | 5 | class Sample extends Component { 6 | constructor(props) { 7 | super(props); 8 | 9 | this.state = { 10 | selectionPathMode: (SelectionPathMode.None) 11 | } 12 | } 13 | 14 | onSelectionPathModeChanged(selectionPathMode) { 15 | this.setState({ selectionPathMode }); 16 | } 17 | 18 | render() { 19 | const { selectionPathMode } = this.state; 20 | const config = { 21 | selectionPathMode, 22 | pageFitMode: PageFitMode.Page, 23 | hasSelectorCheckbox: Enabled.True, 24 | selectedItems: [3], 25 | items: [ 26 | { 27 | id: 0, 28 | parent: null, 29 | title: "James Smith", 30 | description: "VP, Public Sector", 31 | image: "./photos/a.png" 32 | }, 33 | { 34 | id: 1, 35 | parent: 0, 36 | title: "Ted Lucas", 37 | description: "VP, Human Resources", 38 | image: "./photos/b.png" 39 | }, 40 | { 41 | id: 2, 42 | parent: 1, 43 | title: "Fritz Stuger", 44 | description: "Business Solutions, US", 45 | image: "./photos/c.png" 46 | }, 47 | { 48 | id: 3, 49 | parent: 2, 50 | title: "Robert Canon", 51 | description: "Business Solutions, Canada", 52 | image: "./photos/z.png" 53 | } 54 | ] 55 | }; 56 | 57 | return <> 58 |Selection Path Mode:
59 |
60 |
70 |
71 |
81 |
83 |
85 |
86 | }
87 | }
88 |
89 | export default Sample;
90 |
--------------------------------------------------------------------------------
/src/Samples/SelectionPathModeInFamilyChart.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { FamDiagram } from '../Diagrams';
3 | import { SelectionPathMode, PageFitMode, Enabled } from 'basicprimitives';
4 |
5 | class Sample extends Component {
6 | constructor(props) {
7 | super(props);
8 |
9 | this.state = {
10 | selectionPathMode: (SelectionPathMode.None)
11 | }
12 | }
13 |
14 | onSelectionPathModeChanged(selectionPathMode) {
15 | this.setState({ selectionPathMode });
16 | }
17 |
18 | render() {
19 | const { selectionPathMode } = this.state;
20 | const config = {
21 | selectionPathMode,
22 | pageFitMode: PageFitMode.Page,
23 | hasSelectorCheckbox: Enabled.True,
24 | selectedItems: [3],
25 | items: [
26 | {
27 | id: 0,
28 | parents: null,
29 | title: "James Smith",
30 | description: "VP, Public Sector",
31 | image: "./photos/a.png"
32 | },
33 | {
34 | id: 1,
35 | parents: [0],
36 | title: "Ted Lucas",
37 | description: "VP, Human Resources",
38 | image: "./photos/b.png"
39 | },
40 | {
41 | id: 2,
42 | parents: [1],
43 | title: "Fritz Stuger",
44 | description: "Business Solutions, US",
45 | image: "./photos/c.png"
46 | },
47 | {
48 | id: 3,
49 | parents: [2],
50 | title: "Robert Canon",
51 | description: "Business Solutions, Canada",
52 | image: "./photos/z.png"
53 | }
54 | ]
55 | };
56 |
57 | return <>
58 | Selection Path Mode:
59 |
60 |
70 |
71 |
81 |
83 |
85 |
86 | }
87 | }
88 |
89 | export default Sample;
90 |
--------------------------------------------------------------------------------
/src/Samples/LevelAnnotation.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { OrgDiagram } from '../Diagrams';
3 | import { Thickness, LevelAnnotationConfig, AnnotationType, Colors, LineType, GroupByType, PageFitMode, Enabled } from 'basicprimitives';
4 |
5 | class Sample extends Component {
6 | render() {
7 | const config = {
8 | items: [
9 | /* JSON noname objects equivalent to OrgItemConfig */
10 | { id: 0, parent: null, title: "James Smith", description: "VP, Public Sector", image: "./photos/a.png" },
11 | { id: 1, parent: 0, title: "Ted Lucas", description: "VP, Human Resources", image: "./photos/b.png" },
12 | { id: 2, parent: 0, title: "Fritz Stuger", description: "Business Solutions, US", image: "./photos/c.png" },
13 | { id: 3, parent: 2, title: "Robert Canon", description: "Operation, US", image: "./photos/r.png" },
14 | ],
15 | annotations: [
16 | {
17 | annotationType: AnnotationType.Level,
18 | levels: [0],
19 | title: "Level 0",
20 | titleColor: Colors.RoyalBlue,
21 | offset: new Thickness(0, 0, 0, -1),
22 | lineWidth: new Thickness(0, 0, 0, 0),
23 | opacity: 0,
24 | borderColor: Colors.Gray,
25 | fillColor: Colors.Gray,
26 | lineType: LineType.Dotted
27 | },
28 | new LevelAnnotationConfig({
29 | levels: [1],
30 | title: "Level 1",
31 | titleColor: Colors.Green,
32 | offset: new Thickness(0, 0, 0, -1),
33 | lineWidth: new Thickness(0, 0, 0, 0),
34 | opacity: 0.08,
35 | borderColor: Colors.Gray,
36 | fillColor: Colors.Gray,
37 | lineType: LineType.Dotted
38 | }),
39 | new LevelAnnotationConfig({
40 | levels: [2],
41 | title: "Level 2",
42 | titleColor: Colors.Red,
43 | offset: new Thickness(0, 0, 0, -1),
44 | lineWidth: new Thickness(0, 0, 0, 0),
45 | opacity: 0,
46 | borderColor: Colors.Gray,
47 | fillColor: Colors.Gray,
48 | lineType: LineType.Solid
49 | })
50 | ],
51 | cursorItem: 0,
52 | hasSelectorCheckbox: Enabled.True,
53 | normalItemsInterval: 40 /* defines padding around items of background annotations*/,
54 | arrowsDirection: GroupByType.Parents,
55 | pageFitMode: PageFitMode.FitToPage
56 | };
57 |
58 | return <>
59 |
60 |
62 |
63 | }
64 | }
65 |
66 | export default Sample;
67 |
--------------------------------------------------------------------------------
/src/Samples/MatrixLayoutOfMultipleRootItemsInChart.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { OrgDiagram } from '../Diagrams';
3 | import { PageFitMode, ChildrenPlacementType, OrientationType, Enabled } from 'basicprimitives';
4 |
5 | class Sample extends Component {
6 | render() {
7 | const config = {
8 | pageFitMode: PageFitMode.None,
9 | cursorItem: 1,
10 | highlightItem: null,
11 | hasSelectorCheckbox: Enabled.True,
12 | orientationType: OrientationType.Top,
13 | items: [
14 | {
15 | id: 0,
16 | title: "invisible",
17 | parent: null,
18 | isVisible: false,
19 | childrenPlacementType: ChildrenPlacementType.Matrix
20 | },
21 | {
22 | id: 1,
23 | parent: 0,
24 | title: "Item 1",
25 | description: "Some description about item",
26 | image: "./photos/b.png"
27 | },
28 | {
29 | id: 2,
30 | parent: 0,
31 | title: "Item 2",
32 | description: "Some description about item",
33 | image: "./photos/b.png"
34 | },
35 | {
36 | id: 3,
37 | parent: 0,
38 | title: "Item 3",
39 | description: "Some description about item",
40 | image: "./photos/b.png"
41 | },
42 | {
43 | id: 4,
44 | parent: 0,
45 | title: "Item 4",
46 | description: "Some description about item",
47 | image: "./photos/b.png"
48 | },
49 | {
50 | id: 5,
51 | parent: 0,
52 | title: "Item 5",
53 | description: "Some description about item",
54 | image: "./photos/b.png"
55 | },
56 | {
57 | id: 6,
58 | parent: 0,
59 | title: "Item 6",
60 | description: "Some description about item",
61 | image: "./photos/b.png"
62 | },
63 | {
64 | id: 7,
65 | parent: 0,
66 | title: "Item 7",
67 | description: "Some description about item",
68 | image: "./photos/b.png"
69 | },
70 | {
71 | id: 8,
72 | parent: 0,
73 | title: "Item 8",
74 | description: "Some description about item",
75 | image: "./photos/b.png"
76 | },
77 | {
78 | id: 9,
79 | parent: 0,
80 | title: "Item 9",
81 | description: "Some description about item",
82 | image: "./photos/b.png"
83 | }
84 | ]
85 | };
86 |
87 | return
88 |
90 | }
91 | }
92 |
93 | export default Sample;
94 |
--------------------------------------------------------------------------------
/src/Samples/MultipleRootItemsInChart.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { OrgDiagram } from '../Diagrams';
3 | import { PageFitMode, Enabled, OrientationType } from 'basicprimitives';
4 |
5 | class Sample extends Component {
6 | constructor() {
7 | super();
8 |
9 | this.state = {
10 | config: {
11 | pageFitMode: PageFitMode.None,
12 | cursorItem: 0,
13 | highlightItem: 0,
14 | hasSelectorCheckbox: Enabled.True,
15 | orientationType: OrientationType.Top,
16 | items: [
17 | {
18 | id: 0,
19 | parent: null,
20 | title: "James Smith",
21 | description: "VP, Public Sector",
22 | image: "./photos/a.png"
23 | },
24 | {
25 | id: 1,
26 | parent: 0,
27 | title: "Ted Lucas",
28 | description: "VP, Human Resources",
29 | image: "./photos/b.png"
30 | },
31 | {
32 | id: 2,
33 | parent: 0,
34 | title: "Fritz Stuger",
35 | description: "Business Solutions, US",
36 | image: "./photos/c.png"
37 | },
38 | {
39 | id: 3,
40 | parent: null,
41 | title: "James Smith 2",
42 | description: "VP, Public Sector",
43 | image: "./photos/a.png"
44 | },
45 | {
46 | id: 4,
47 | parent: 3,
48 | title: "Ted Lucas 2",
49 | description: "VP, Human Resources",
50 | image: "./photos/b.png"
51 | },
52 | {
53 | id: 5,
54 | parent: 3,
55 | title: "Fritz Stuger 2",
56 | description: "Business Solutions, US",
57 | image: "./photos/c.png"
58 | }
59 | ]
60 | }
61 | }
62 | }
63 |
64 | update(orientationType) {
65 | const { config } = this.state;
66 | this.setState({
67 | config: {
68 | ...config,
69 | orientationType
70 | }
71 | })
72 | }
73 |
74 |
75 | render() {
76 | const { config } = this.state;
77 |
78 | return <>
79 | Set chart orientation to: 80 | 81 | 82 | 83 | 84 |
85 |
86 |
88 | ;
89 | }
90 | }
91 |
92 | export default Sample;
93 |
--------------------------------------------------------------------------------
/src/Samples/MatrixLayoutInFamilyChart.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { FamDiagram } from '../Diagrams';
3 | import { Enabled, GroupByType, PageFitMode } from 'basicprimitives';
4 |
5 | class Sample extends Component {
6 | render() {
7 | const config = {
8 | cursorItem: 1,
9 | enableMatrixLayout: true,
10 | minimumMatrixSize: 3,
11 | hasSelectorCheckbox: Enabled.False,
12 | arrowsDirection: GroupByType.Children,
13 | pageFitMode: PageFitMode.None,
14 | items: [
15 | { id: 1, parents: [], title: "Corp 1", label: "Corp 1", description: "Parent 1", image: "./photos/p.png" },
16 | { id: 2, parents: [], title: "Corp 2", label: "Corp 2", description: "Parent 2", image: "./photos/p.png" },
17 | { id: 101, parents: [], title: "Corp 3", label: "Corp 3", description: "Parent 3", image: "./photos/p.png" },
18 | { id: 102, parents: [], title: "Corp 4", label: "Corp 4", description: "Parent 4", image: "./photos/p.png" },
19 | { id: 3, parents: [1, 2, 101, 102], title: "Sibling 1", label: "Sibling 1", description: "Sibling 1", image: "./photos/s.png" },
20 | { id: 4, parents: [1, 2, 101, 102], title: "Sibling 2", label: "Sibling 2", description: "Sibling 2", image: "./photos/s.png" },
21 | { id: 5, parents: [1, 2, 101, 102], title: "Sibling 3", label: "Sibling 3", description: "Sibling 3", image: "./photos/s.png" },
22 | { id: 6, parents: [1, 2, 101, 102], title: "Sibling 4", label: "Sibling 4", description: "Sibling 4", image: "./photos/s.png" },
23 | { id: 7, parents: [1, 2, 101, 102], title: "Sibling 5", label: "Sibling 5", description: "Sibling 5", image: "./photos/s.png" },
24 | { id: 8, parents: [1, 2, 101, 102], title: "Sibling 6", label: "Sibling 6", description: "Sibling 6", image: "./photos/s.png" },
25 | { id: 9, parents: [1, 2, 101, 102], title: "Sibling 7", label: "Sibling 7", description: "Sibling 7", image: "./photos/s.png" },
26 | { 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.png" },
27 | { 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.png" },
28 | { 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.png" },
29 | { 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.png" }
30 | ]
31 | };
32 |
33 | return
34 |
36 | }
37 | }
38 |
39 | export default Sample;
40 |
--------------------------------------------------------------------------------
/src/Samples/ChildrenPlacementType.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { OrgDiagram } from '../Diagrams';
3 | import { PageFitMode, Enabled, ChildrenPlacementType } from 'basicprimitives';
4 |
5 | class Sample extends Component {
6 | render() {
7 | const config = {
8 | pageFitMode: PageFitMode.None,
9 | maximumColumnsInMatrix: 3,
10 | cursorItem: 1,
11 | highlightItem: 0,
12 | normalItemsInterval: 20,
13 | cousinsIntervalMultiplier: 1,
14 | defaultTemplateName: "info",
15 | templates: [{
16 | name: "info",
17 | itemSize: { width: 80, height: 36 },
18 | minimizedItemSize: { width: 3, height: 3 },
19 | highlightPadding: { left: 4, top: 4, right: 4, bottom: 4 },
20 | onItemRender: ({ context: itemConfig }) => {
21 | return {itemConfig.title}
;
22 | }
23 | }],
24 | hasSelectorCheckbox: Enabled.False,
25 | items: [
26 | /* matrix layout example */
27 | {
28 | id: 1,
29 | parent: null,
30 | title: "Matrix Layout",
31 | childrenPlacementType: ChildrenPlacementType.Matrix
32 | },
33 | { id: 2, parent: 1, title: "Child 1" },
34 | { id: 3, parent: 1, title: "Child 2" },
35 | { id: 4, parent: 1, title: "Child 3" },
36 | { id: 5, parent: 1, title: "Child 4" },
37 | { id: 6, parent: 1, title: "Child 5" },
38 | { id: 7, parent: 1, title: "Child 6" },
39 | { id: 8, parent: 1, title: "Child 7" },
40 | { id: 9, parent: 1, title: "Child 8" },
41 |
42 | /* vertical layout example */
43 | {
44 | id: 101,
45 | parent: null,
46 | title: "Vertical Layout",
47 | childrenPlacementType: ChildrenPlacementType.Vertical
48 | },
49 | { id: 102, parent: 101, title: "Child 1" },
50 | { id: 103, parent: 101, title: "Child 2", childrenPlacementType: ChildrenPlacementType.Vertical },
51 | { id: 104, parent: 103, title: "Sub Child 3" },
52 | { id: 105, parent: 103, title: "Sub Child 4" },
53 | { id: 106, parent: 101, title: "Child 5" },
54 | { id: 107, parent: 101, title: "Child 6" },
55 |
56 | /* horizontal layout example */
57 | {
58 | id: 201,
59 | parent: null,
60 | title: "Horizontal Layout",
61 | childrenPlacementType: ChildrenPlacementType.Horizontal
62 | },
63 | { id: 202, parent: 201, title: "Child 1" },
64 | { id: 203, parent: 201, title: "Child 2" },
65 | { id: 204, parent: 201, title: "Child 3" }
66 | ]
67 | };
68 |
69 | return
70 |
72 | }
73 | }
74 |
75 | export default Sample;
76 |
--------------------------------------------------------------------------------
/src/Samples/FamilyChartPrimaryParent.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { FamDiagram } from '../Diagrams';
3 | import { AdviserPlacementType, PageFitMode, Enabled, GroupByType } from 'basicprimitives';
4 |
5 | class Sample extends Component {
6 | constructor(props) {
7 | super(props);
8 |
9 | this.onClick = this.onClick.bind(this);
10 |
11 | this.state = {
12 | items: [
13 | { id: 1, title: "Roger Dalton", label: "Roger Dalton", description: "Id: 1", image: "./photos/a.png", itemTitleColor: "navy" },
14 | { id: 2, parents: [1], title: "Steven Lacombe", label: "Steven Lacombe", description: "Id: 2", image: "./photos/b.png", itemTitleColor: "navy" },
15 | { id: 3, parents: [1], title: "Bill Dalton", label: "Bill Dalton", description: "Id: 3", image: "./photos/c.png", itemTitleColor: "navy", relativeItem: 2, placementType: AdviserPlacementType.Right, position: 1 },
16 | { id: 4, title: "Ann Smith", label: "Ann Smith", description: "Id: 4", image: "./photos/a.png", itemTitleColor: "navy" },
17 | { id: 5, parents: [4], title: "Nancy Smith", label: "Nancy Smith", description: "Id: 5", image: "./photos/c.png", itemTitleColor: "navy" },
18 | { id: 6, parents: [4], title: "Helly Smith", label: "Helly Smith", description: "Id: 6", image: "./photos/a.png", itemTitleColor: "navy", relativeItem: 5, placementType: AdviserPlacementType.Right, position: 1 },
19 | { id: 7, parents: [2, 6], title: "Kelly Smith", label: "Kelly Smith", description: "Id: 7", image: "./photos/c.png", itemTitleColor: "navy" },
20 | { id: 8, parents: [3, 5], primaryParent: 5, title: "Sally Smith", label: "Sally Smith", description: "Id: 8", image: "./photos/a.png" }
21 | ]
22 | }
23 | }
24 |
25 | onClick() {
26 | const { items } = this.state;
27 |
28 | const newItems = items.map(item => {
29 | if (item.id === 8) {
30 | var { primaryParent } = item;
31 | primaryParent = (primaryParent === 3) ? 5 : 3;
32 | return {
33 | ...item,
34 | primaryParent
35 | }
36 | }
37 | return item;
38 | })
39 | this.setState({
40 | items: newItems
41 | })
42 | }
43 |
44 | render() {
45 | const { items } = this.state;
46 | const config = {
47 | items,
48 | pageFitMode: PageFitMode.None,
49 | cursorItem: 2,
50 | linesWidth: 1,
51 | linesColor: "black",
52 | hasSelectorCheckbox: Enabled.False,
53 | arrowsDirection: GroupByType.Parents,
54 | showExtraArrows: false
55 | };
56 |
57 | return <>
58 |
59 |
60 |
62 |
63 | }
64 | }
65 |
66 | export default Sample;
67 |
--------------------------------------------------------------------------------
/src/Diagrams/Templates/GroupTitleTemplate.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import AbstractTemplate from './AbstractTemplate';
3 | import RotatedText from './RotatedText';
4 | import { highestContrast } from 'basicprimitives';
5 |
6 | class GroupTitleTemplate extends AbstractTemplate {
7 | constructor(options) {
8 | super();
9 | this.render = this.render.bind(this);
10 |
11 | this.options = options;
12 |
13 | this.style = {
14 | position: "absolute",
15 | fontFamily: "Trebuchet MS, Tahoma, Verdana, Arial, sans-serif",
16 | WebkitTapHighlightColor: "rgba(0,0,0,0)",
17 | WebkitUserSelect: "none",
18 | WebkitTouchCallout: "none",
19 | KhtmlUserSelect: "none",
20 | MozUserSelect: "none",
21 | msUserSelect: "none",
22 | userSelect: "none",
23 | boxSizing: "content-box",
24 |
25 | MozBorderRadius: "4px",
26 | WebkitBorderRadius: "4px",
27 | KhtmlBorderRadius: "4px",
28 | BorderRadius: "4px",
29 |
30 | background: "royalblue",
31 | borderWidth: 0,
32 | color: "white",
33 | padding: 0,
34 | width: "100%",
35 | height: "100%",
36 | left: "-1px",
37 | top: "-1px"
38 | }
39 | }
40 |
41 | render(data) {
42 | const {
43 | groupTitleFontSize,
44 | groupTitleFontFamily,
45 | groupTitleFontWeight,
46 | groupTitleFontStyle,
47 | itemTitleSecondFontColor,
48 | itemTitleFirstFontColor,
49 | groupTitleOrientation,
50 | groupTitleHorizontalAlignment,
51 | groupTitleVerticalAlignment,
52 | groupTitleColor
53 | } = this.options;
54 |
55 | const {
56 | context: itemConfig,
57 | width,
58 | height
59 | } = data;
60 |
61 | const backgroundColor = itemConfig.groupTitleColor || groupTitleColor;
62 | const label = (itemConfig.groupTitle || "").replace("\n", ""); 63 | const color = highestContrast(backgroundColor, itemTitleSecondFontColor, itemTitleFirstFontColor); 64 | 65 | const orientations = ['Horizontal', 'RotateLeft', 'RotateRight', 'Horizontal'], 66 | horizontalAlignments = ['center', 'left', 'right'], 67 | verticalAlignments = ['top', 'middle', 'bottom']; 68 | const style = { 69 | ...this.style, 70 | backgroundColor, 71 | color, 72 | fontSize: groupTitleFontSize, 73 | fontFamily: groupTitleFontFamily, 74 | fontWeight: groupTitleFontWeight, 75 | fontStyle: groupTitleFontStyle 76 | } 77 | return
78 | {label}
85 |
;
86 | }
87 | };
88 |
89 | export default GroupTitleTemplate;
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "basicprimitivesreact",
3 | "sideEffects": false,
4 | "version": "6.6.1",
5 | "main": "dist/umd/index.js",
6 | "module": "dist/esm/index.js",
7 | "babel": {
8 | "presets": [
9 | "@babel/preset-env",
10 | "@babel/preset-react"
11 | ],
12 | "plugins": [
13 | "@babel/plugin-proposal-class-properties"
14 | ]
15 | },
16 | "repository": {
17 | "type": "git",
18 | "url": "https://github.com/BasicPrimitives/react"
19 | },
20 | "homepage": "https://basicprimitives.github.io/react/",
21 | "license": "SEE LICENSE IN license.pdf",
22 | "dependencies": {
23 | "basicprimitives": "6.6.1",
24 | "resize-observer-polyfill": "^1.5.1"
25 | },
26 | "devDependencies": {
27 | "@babel/cli": "^7.25.6",
28 | "@babel/core": "^7.25.2",
29 | "@babel/node": "^7.25.0",
30 | "@babel/plugin-proposal-class-properties": "^7.18.6",
31 | "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
32 | "@babel/preset-env": "^7.25.4",
33 | "@babel/preset-react": "^7.24.7",
34 | "@eslint/js": "^9.9.0",
35 | "@fortawesome/fontawesome-svg-core": "^6.6.0",
36 | "@fortawesome/free-solid-svg-icons": "^6.6.0",
37 | "@fortawesome/react-fontawesome": "^0.2.2",
38 | "@types/react": "^18.3.3",
39 | "@types/react-dom": "^18.3.0",
40 | "@vitejs/plugin-react": "^4.3.1",
41 | "eslint": "^9.9.0",
42 | "eslint-plugin-react": "^7.35.0",
43 | "eslint-plugin-react-hooks": "^5.1.0-rc.0",
44 | "eslint-plugin-react-refresh": "^0.4.9",
45 | "globals": "^15.9.0",
46 | "react": "^18.3.1",
47 | "react-dnd": "^16.0.1",
48 | "react-dnd-html5-backend": "^16.0.1",
49 | "react-dom": "^18.3.1",
50 | "vite": "^5.4.1"
51 | },
52 | "scripts": {
53 | "dev": "vite",
54 | "build": "vite build",
55 | "lint": "eslint .",
56 | "preview": "vite preview",
57 | "publish:npm": "SET NODE_ENV=production && if exist dist rmdir /s /q dist && mkdir dist && npx babel src/Diagrams --presets=\"module:@babel/preset-react\" --out-dir dist/esm --copy-files && npx babel src/Diagrams --presets=\"module:@babel/preset-env\",\"module:@babel/preset-react\" --out-dir dist/umd --copy-files"
58 | },
59 | "keywords": [
60 | "data analytics",
61 | "data visualization",
62 | "visualization",
63 | "diagrams",
64 | "diagram layout",
65 | "chart",
66 | "charting library",
67 | "diagram",
68 | "diagrams visualization",
69 | "diagram editor",
70 | "diagram generator",
71 | "tree",
72 | "hierarchy",
73 | "organizational chart",
74 | "multiple inheritance visualization",
75 | "family tree",
76 | "dependency diagram",
77 | "dependencies diagram",
78 | "financial ownership diagram",
79 | "layered graph",
80 | "directed acyclic graph",
81 | "component",
82 | "react",
83 | "javascript",
84 | "component library",
85 | "react component"
86 | ]
87 | }
88 |
--------------------------------------------------------------------------------
/src/Samples/LabelsCascadesInFamilyChart.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { FamDiagram } from '../Diagrams';
3 | import { Enabled, AnnotationType } from 'basicprimitives';
4 |
5 | class Sample extends Component {
6 | render() {
7 | const config = {
8 | cursorItem: 2,
9 | linesWidth: 1,
10 | linesColor: "black",
11 | hasSelectorCheckbox: Enabled.False,
12 | normalLevelShift: 20,
13 | dotLevelShift: 20,
14 | lineLevelShift: 20,
15 | normalItemsInterval: 5,
16 | dotItemsInterval: 5,
17 | lineItemsInterval: 5,
18 | items: [
19 | { id: 1, parents: [2], title: "Thomas Williams", label: "Thomas Williams", description: "1, 1st husband", image: "./photos/t.png" },
20 | { id: 2, parents: [2], title: "Mary Spencer", label: "Mary Spencer", description: "2, The Mary", image: "./photos/m.png" },
21 | { id: 3, parents: [2], title: "David Kirby", label: "David Kirby", description: "3, 2nd Husband", image: "./photos/d.png" },
22 | { id: 4, parents: [2], title: "Brad Williams", label: "Brad Williams", description: "4, 1st son", image: "./photos/b.png" },
23 | { id: 5, parents: [2], title: "Mike Kirby", label: "Mike Kirby", description: "5, 2nd son, having 2 spouses", image: "./photos/m.png" }
24 | ],
25 | annotations: [
26 | {
27 | annotationType: AnnotationType.Label,
28 | fromItem: 2,
29 | toItems: [1, 3, 4, 5],
30 | title: 100%
31 | },
32 | {
33 | annotationType: AnnotationType.Label,
34 | fromItem: 2,
35 | toItems: [1, 3, 4],
36 | title: 60%
37 | },
38 | {
39 | annotationType: AnnotationType.Label,
40 | fromItem: 2,
41 | toItems: [5],
42 | title: 40%
43 | },
44 | {
45 | annotationType: AnnotationType.Label,
46 | fromItem: 2,
47 | toItems: [1, 3],
48 | title: 20%
49 | },
50 | {
51 | annotationType: AnnotationType.Label,
52 | fromItem: 2,
53 | toItems: [4],
54 | title: 80%
55 | },
56 | {
57 | annotationType: AnnotationType.Label,
58 | fromItem: 2,
59 | toItems: [1],
60 | title: 35%
61 | },
62 | {
63 | annotationType: AnnotationType.Label,
64 | fromItem: 2,
65 | toItems: [3],
66 | title: 65%
67 | }
68 | ]
69 | };
70 |
71 | return
72 |
74 | }
75 | }
76 |
77 | export default Sample;
78 |
--------------------------------------------------------------------------------
/src/Samples/LoopsInFamilyChart.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { FamDiagram } from '../Diagrams';
3 | import { AnnotationType, GroupByType, ConnectorType, ElbowType, LineType, Colors, PageFitMode, Enabled } from 'basicprimitives';
4 |
5 | class Sample extends Component {
6 | render() {
7 | const config = {
8 | annotations: [
9 | { annotationType: AnnotationType.Label, fromItem: 1, toItems: [3], title: 10%
},
10 | { annotationType: AnnotationType.Label, fromItem: 1, toItems: [5], title: 30%
},
11 | { annotationType: AnnotationType.Label, fromItem: 1, toItems: [6], title: 50%
},
12 | { annotationType: AnnotationType.Label, fromItem: 1, toItems: [7], title: 10%
},
13 | { annotationType: AnnotationType.Label, fromItem: 1, toItems: [3, 5], title: 40%
},
14 | { annotationType: AnnotationType.Label, fromItem: 1, toItems: [3, 5, 6, 7], title: 100%
},
15 | { annotationType: AnnotationType.Label, fromItem: 2, toItems: [1], title: 100%
}
16 | ],
17 | items: [
18 | { id: 1, parents: [3, 5, 6, 7], title: "James", label: "James", description: "James is First and he is child of Brad, Sara & Lynette", image: "./photos/j.png" },
19 | { id: 2, parents: [1], title: "Brad", label: "Brad", description: "", image: "./photos/b.png" },
20 | { id: 3, parents: [2], title: "Thomas", label: "Thomas", description: "", image: "./photos/t.png" },
21 | { id: 4, parents: [3], title: "David", label: "David", description: "", image: "./photos/d.png" },
22 | { id: 5, parents: [4], title: "Lynette", label: "Lynette", description: "", image: "./photos/l.png" },
23 | { id: 6, parents: [4], title: "Sara", label: "Sara", description: "", image: "./photos/s.png" },
24 | { id: 7, title: "Parent", label: "Parent", description: "Parent node of James", image: "./photos/j.png" }
25 | ],
26 | arrowsDirection: GroupByType.Parents,
27 | showExtraArrows: true,
28 | extraArrowsMinimumSpace: 30,
29 | connectorType: ConnectorType.Squared,
30 | elbowType: ElbowType.Round,
31 | bevelSize: 4,
32 | elbowDotSize: 4,
33 | linesType: LineType.Solid,
34 | linesColor: Colors.Black,
35 | linesWidth: 1,
36 |
37 | /* Intervals */
38 | normalLevelShift: 20,
39 | dotLevelShift: 20,
40 | lineLevelShift: 20,
41 |
42 | normalItemsInterval: 20,
43 | dotItemsInterval: 10,
44 | lineItemsInterval: 10,
45 |
46 | cursorItem: 1,
47 | pageFitMode: PageFitMode.None,
48 | hasSelectorCheckbox: Enabled.True
49 | };
50 |
51 | return <>
52 |
53 |
55 |
56 | }
57 | }
58 |
59 | export default Sample;
60 |
--------------------------------------------------------------------------------
/docs/AdviserAndAssistantItemTypes.md:
--------------------------------------------------------------------------------
1 | # Custom Placement of Children
2 | ## Adviser & Assistant Item Types:
3 |
4 | The organizational chart structure is a regular tree. That means that every node can only have one logical parent in the hierarchy. That makes the organizational chart conceptually easy to work with for the end-user who edits the organizational chart and the software developer to maintain the database's required structures and the application.
5 |
6 | In reality, pure hierarchical relations are rare. So in our organizational chart, we provide the means to represent non-hierarchical relations by using different child item types and on-screen annotations.
7 |
8 | The component has the following child positions in diagram layout relative to the parent node:
9 | * Regular
10 | * Adviser
11 | * Assistant
12 | * Sub Adviser
13 | * Sub Assistant
14 | * General Partner
15 | * Limited Partner
16 | * Adviser Partner
17 |
18 | All of them affect child placement relative to its parent in the hierarchy. The following example demonstrates Adviser and Assistant types. The adviser item is placed at the same level as its parent and connected to it horizontally. The assistant occupies the row between the parent and all other regular children. It has a horizontal connection to the vertical line going from the parent to the remaining children.
19 |
20 | Use the `adviserPlacementType` option to place an adviser or assistant on the parent's node hierarchy's left or right side.
21 |
22 | Use the `levelOffset` option to arrange assistants into multiple rows. See the regular children layout sample.
23 |
24 | [React](../src/Samples/AdviserAndAssistantItemTypes.jsx)
25 |
26 | ## Sub Adviser & Sub Assistant item types
27 |
28 | Sub Adviser & Sub Assistant item types are variations of regular Adviser & Assistant types. The only difference is that they have the connection line going from the top edge of the node, and they are shift down one level relative to their parents.
29 |
30 | Use the `adviserPlacementType` option to place them on the parent's hierarchy's left or right side.
31 |
32 | [React](../src/Samples/SubAdviserAndSubAssistantItemTypes.jsx)
33 |
34 | ## Adviser child nodes placement above parent's node children
35 |
36 | If the adviser node has its children, then control adds extra levels, so it places advisers children at rows above the parent's children. You can alter this layout schema with the `placeAdvisersAboveChildren` option. If you set it to false, control would place advisers and the parent's children at the same row of the diagram.
37 |
38 | [React](../src/Samples/PlaceAdvisersAboveChildren.jsx)
39 |
40 | ## Assistant child nodes placement above parent's node children
41 | If the assistant node has its children, then control pushes the parent's children down, placing assistant children at rows above the parent's children. You can alter this layout schema with the `placeAssistantsAboveChildren` option. If you set it to false, then the parent's and assistant's node children would be rendered side by side at the same level.
42 |
43 | [React](../src/Samples/PlaceAssistantsAboveChildren.jsx)
--------------------------------------------------------------------------------
/src/Samples/FamilyChartItemsOrdering.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { FamDiagram } from '../Diagrams';
3 | import { AdviserPlacementType, PageFitMode, Enabled, GroupByType } from 'basicprimitives';
4 |
5 | class Sample extends Component {
6 | constructor(props) {
7 | super(props);
8 |
9 | this.onClick = this.onClick.bind(this);
10 |
11 | this.state = {
12 | items: [
13 | { id: 10, relativeItem: 2, placementType: AdviserPlacementType.Left, position: 1, title: "Roger Dalton", label: "Roger Dalton", description: "Id: 10", image: "./photos/a.png", itemTitleColor: "#4169e1" },
14 | { id: 2, title: "Steven Lacombe", label: "Steven Lacombe", description: "Id: 2", image: "./photos/b.png", itemTitleColor: "#4b0082" },
15 | { id: 11, relativeItem: 2, placementType: AdviserPlacementType.Right, position: 1, title: "Bill Dalton", label: "Bill Dalton", description: "Id: 11", image: "./photos/c.png", itemTitleColor: "#4b0082" },
16 | { id: 1, parents: [11], title: "David Dalton", label: "David Dalton", description: "Id: 1", image: "./photos/c.png", itemTitleColor: "#4b0082" },
17 | { id: 3, parents: [10], title: "Ann Smith", label: "Ann Smith", description: "Id: 3", image: "./photos/a.png", itemTitleColor: "#4169e1" },
18 | { id: 4, parents: [2], title: "Nancy Smith", label: "Nancy Smith", description: "Id: 4", image: "./photos/c.png", itemTitleColor: "#4b0082" },
19 | { id: 5, parents: [2], title: "Helly Smith", label: "Helly Smith", description: "Id: 5", image: "./photos/a.png", itemTitleColor: "#4169e1" },
20 | { id: 6, parents: [1, 4], title: "Kelly Smith", label: "Kelly Smith", description: "Id: 6", image: "./photos/c.png", itemTitleColor: "#4b0082" },
21 | { id: 7, parents: [5, 3], title: "Sally Smith", label: "Sally Smith", description: "Id: 7", image: "./photos/a.png", itemTitleColor: "#4169e1" }
22 | ]
23 | }
24 | }
25 |
26 | onClick() {
27 | const { items } = this.state;
28 |
29 | const newItems = items.map(item => {
30 | if (item.id === 10 || item.id === 11) {
31 | let { placementType } = item;
32 | if (placementType === AdviserPlacementType.Right) {
33 | placementType = AdviserPlacementType.Left;
34 | } else {
35 | placementType = AdviserPlacementType.Right;
36 | }
37 | return {
38 | ...item,
39 | placementType
40 | }
41 | }
42 | return item;
43 | })
44 | this.setState({
45 | items: newItems
46 | })
47 | }
48 |
49 | render() {
50 | const { items } = this.state;
51 | const config = {
52 | items,
53 | pageFitMode: PageFitMode.None,
54 | cursorItem: 2,
55 | linesWidth: 1,
56 | linesColor: "black",
57 | hasSelectorCheckbox: Enabled.False,
58 | arrowsDirection: GroupByType.Parents,
59 | showExtraArrows: false
60 | };
61 |
62 | return <>
63 |
64 |
65 |
67 |
68 | }
69 | }
70 |
71 | export default Sample;
72 |
--------------------------------------------------------------------------------
/src/Samples/GroupTitleTemplate.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { OrgDiagram, RotatedText } from '../Diagrams';
3 | import { PageFitMode, Enabled, Colors, TextOrientationType, OrgItemConfig } from 'basicprimitives';
4 |
5 | class Sample extends Component {
6 | render() {
7 | var style = {
8 | position: "absolute",
9 | fontSize: "12px",
10 | fontFamily: "Trebuchet MS, Tahoma, Verdana, Arial, sans-serif",
11 | WebkitTapHighlightColor: "rgba(0,0,0,0)",
12 | WebkitUserSelect: "none",
13 | WebkitTouchCallout: "none",
14 | KhtmlUserSelect: "none",
15 | MozUserSelect: "none",
16 | msUserSelect: "none",
17 | userSelect: "none",
18 | boxSizing: "content-box",
19 |
20 | MozBorderRadius: "4px",
21 | WebkitBorderRadius: "4px",
22 | KhtmlBorderRadius: "4px",
23 | BorderRadius: "4px",
24 |
25 | background: "royalblue",
26 | borderWidth: 0,
27 | color: "white",
28 | padding: 0,
29 | width: "100%",
30 | height: "100%",
31 | left: "-1px",
32 | top: "-1px"
33 | }
34 | const config = {
35 | pageFitMode: PageFitMode.FitToPage,
36 | cursorItem: 0,
37 | highlightItem: 0,
38 | hasSelectorCheckbox: Enabled.True,
39 | itemTitleFirstFontColor: Colors.Yellow,
40 | itemTitleSecondFontColor: Colors.Blue,
41 | groupTitleOrientation: TextOrientationType.RotateRight,
42 |
43 | items: [
44 | new OrgItemConfig({
45 | id: 0,
46 | parent: null,
47 | title: "James Smith",
48 | description: "VP, Public Sector",
49 | groupTitle: "Group 1",
50 | image: "./photos/a.png",
51 | itemTitleColor: Colors.Black
52 | }),
53 | new OrgItemConfig({
54 | id: 1,
55 | parent: 0,
56 | title: "Ted Lucas",
57 | description: "VP, Human Resources",
58 | image: "./photos/b.png",
59 | itemTitleColor: Colors.Green,
60 | groupTitle: "Group 2",
61 | groupTitleColor: Colors.Gray
62 | }),
63 | new OrgItemConfig({
64 | id: 2,
65 | parent: 0,
66 | title: "Fritz Stuger",
67 | description: "Business Solutions, US",
68 | image: "./photos/c.png",
69 | itemTitleColor: Colors.Yellow,
70 | groupTitle: "Group 2"
71 | })
72 | ],
73 | onGroupTitleRender: ((data) => {
74 | var {context: itemConfig, width, height} = data;
75 | return {
76 | event.stopPropagation();
77 | alert(`User clicked on group title for node ${itemConfig.title}`)
78 | }}>
79 | {itemConfig.groupTitle}
86 |
87 | })
88 | };
89 |
90 | return
91 |
93 | }
94 | }
95 |
96 | export default Sample;
97 |
--------------------------------------------------------------------------------
/docs/Buttons.md:
--------------------------------------------------------------------------------
1 | # Buttons panel
2 |
3 | The component provides options to preserve some space around nodes to render custom controls or buttons. Buttons rendered in diagram layout provides better UI discoverability compared to context popup panel.
4 |
5 | Enabling buttons panel visibility at component scope with `hasButtons` property:
6 | * `Enabled.Auto` - Buttons visible only for cursor item.
7 | * `Enabled.True` - Every normal item has buttons visible.
8 | * `Enabled.False` - No buttons.
9 |
10 | ```JavaScript
11 | import { OrgDiagram } from basicprimitivesreact;
12 | import { Enabled } from basicprimitives;
13 |
89 | {children}
90 |
91 | :
92 | | 102 | {children} 103 | | 104 |
Select following items:
88 | {
89 | items.map(item =>
98 |
100 | {message.length > 0 ? User selected following items: {message}
: null} 101 | ; 102 | } 103 | } 104 | 105 | export default Sample; 106 | -------------------------------------------------------------------------------- /docs/ConnectorAnnotation.md: -------------------------------------------------------------------------------- 1 | # Connector Annotations 2 | 3 | Connector annotation is an on-screen direct connection line between two nodes of the diagram. It supports simple conflict resolution. If multiple connector annotations overlap each other between the same pair of nodes, the control offsets them and draws them parallel. 4 | 5 | The following sample demonstrates connection annotation drawn in the offbeat style. This way, connection annotation should not overlap diagram's base connection lines and block the primary diagram hierarchy view. The offbeat connector annotation compensates for the lack of space between nodes via drawing its curve outside of connected nodes. 6 | 7 | ## Styles 8 | * `ConnectorPlacementType.Offbeat` - Free hand drawing of connector annotation 9 | * `ConnectorPlacementType.Straight` - Straight line between nodes 10 | 11 | ## Shapes 12 | In general, shape of connector annotation may indicate various relations, so component supports following simple use case: 13 | * `ConnectorShapeType.OneWay` - The arrow line between `fromItem` and `toItem` nodes 14 | * `ConnectorShapeType.TwoWay` - Two opposite direction arrow lines between `fromItem` and `toItem` nodes 15 | * `ConnectorShapeType.BothWay` - One line having arrows on both ends 16 | 17 | ## Labels 18 | Connector annotations labels are plain text or JSX elements. Please, pay attention that component does not resolve connector annotations labels overlapping, so many annotations labels can clutter view and diagram in general. 19 | 20 | [React](../src/Samples/ConnectorAnnotation.jsx) 21 | 22 | # Connector Annotations Drag & Drop 23 | 24 | The following sample demonstrates how drag-and-drop can be used to create or modify connector annotations in a diagram. 25 | 26 | * Drag nodes to create new annotations. 27 | * Drag annotation endpoints to reconnect them to different nodes. 28 | * Drag an endpoint to the origin node to delete the annotation. 29 | 30 | [React](../src/Samples/ConnectorAnnotationDragNDropHooks.jsx) 31 | 32 | ## Drag and Drop Implementation 33 | 34 | The drag-and-drop behavior is implemented using **React DnD** library: 35 | 36 | - **Node drag source:** allows users to drag nodes and create new annotations by dropping on other nodes. 37 | - **Endpoint drag source:** allows users to reconnect existing annotations by dragging endpoints to different nodes. 38 | - **Custom drag layer:** provides real-time visual feedback by rendering a temporary live connector annotation between drag start and current mouse position. 39 | 40 | ## Limitations 41 | 42 | Due to [React Drag & Drop](http://react-dnd.github.io/react-dnd/about) being implemented using the HTML5 drag and drop API, there is an important technical limitation: 43 | 44 | - While dragging an annotation or its endpoint, the original annotation remains visible in the diagram. 45 | - Simultaneously, the custom drag layer renders a live preview of the dragged annotation. 46 | - As a result, both the original annotation and its live copy are temporarily visible during drag. 47 | 48 | The root cause is that HTML5 drag-and-drop requires the dragged DOM element to remain mounted during the drag operation. If we attempt to modify or remove the dragged annotation from OrgDiagram while dragging, the corresponding DOM element is unmounted from the document, which aborts the drag-and-drop operation. In order to overcome this problem, we have to use non-native drag & drop frameworks. 49 | 50 | -------------------------------------------------------------------------------- /src/Diagrams/Templates/LevelTitleTemplate.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import AbstractTemplate from './AbstractTemplate'; 3 | import RotatedText from './RotatedText'; 4 | import { OrientationType, TextOrientationType } from 'basicprimitives'; 5 | 6 | class LevelTitleTemplate extends AbstractTemplate { 7 | constructor(options, orientation) { 8 | super(); 9 | this.render = this.render.bind(this); 10 | 11 | this.options = options; 12 | this.orientation = orientation; 13 | 14 | this.style = { 15 | position: "absolute", 16 | fontFamily: "Trebuchet MS, Tahoma, Verdana, Arial, sans-serif", 17 | WebkitTapHighlightColor: "rgba(0,0,0,0)", 18 | WebkitUserSelect: "none", 19 | WebkitTouchCallout: "none", 20 | KhtmlUserSelect: "none", 21 | MozUserSelect: "none", 22 | msUserSelect: "none", 23 | userSelect: "none", 24 | boxSizing: "content-box", 25 | 26 | MozBorderRadius: "4px", 27 | WebkitBorderRadius: "4px", 28 | KhtmlBorderRadius: "4px", 29 | BorderRadius: "4px", 30 | 31 | background: "royalblue", 32 | borderWidth: 0, 33 | color: "white", 34 | padding: 0, 35 | width: "100%", 36 | height: "100%", 37 | left: "-1px", 38 | top: "-1px" 39 | } 40 | } 41 | 42 | render(data) { 43 | var { 44 | levelTitleFontSize, 45 | levelTitleFontFamily, 46 | levelTitleFontWeight, 47 | levelTitleFontStyle, 48 | levelTitleOrientation, 49 | levelTitleHorizontalAlignment, 50 | levelTitleVerticalAlignment, 51 | levelTitleFontColor, 52 | levelTitleColor 53 | } = this.options; 54 | 55 | if(levelTitleOrientation === TextOrientationType.Auto) { 56 | switch (this.orientation) { 57 | case OrientationType.Top: 58 | levelTitleOrientation = TextOrientationType.RotateRight; 59 | break; 60 | case OrientationType.Bottom: 61 | levelTitleOrientation = TextOrientationType.RotateRight; 62 | break; 63 | default: 64 | break; 65 | } 66 | } 67 | 68 | const { 69 | context: annotationConfig, 70 | width, 71 | height 72 | } = data; 73 | 74 | const backgroundColor = annotationConfig.titleColor || levelTitleColor; 75 | const label = (annotationConfig.title || "").replace("\n", ""); 76 | const color = annotationConfig.titleFontColor || levelTitleFontColor; 77 | 78 | const orientations = ['Horizontal', 'RotateLeft', 'RotateRight', 'Horizontal'], 79 | horizontalAlignments = ['center', 'left', 'right'], 80 | verticalAlignments = ['top', 'middle', 'bottom']; 81 | const style = { 82 | ...this.style, 83 | backgroundColor, 84 | color, 85 | fontSize: levelTitleFontSize, 86 | fontFamily: levelTitleFontFamily, 87 | fontWeight: levelTitleFontWeight, 88 | fontStyle: levelTitleFontStyle 89 | } 90 | return
91 | {label}
98 |
;
99 | }
100 | };
101 |
102 | export default LevelTitleTemplate;
--------------------------------------------------------------------------------
/src/Samples/FamilyHideGrandParentsConnections.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { FamDiagram } from '../Diagrams';
3 | import { AnnotationType, Colors, PageFitMode, Enabled, GroupByType } from 'basicprimitives';
4 |
5 | class Sample extends Component {
6 | constructor(props) {
7 | super(props);
8 |
9 | this.state = {
10 | hideGrandParentsConnectors: false
11 | }
12 | }
13 |
14 | onChanged(hideGrandParentsConnectors) {
15 | this.setState({ hideGrandParentsConnectors });
16 | }
17 |
18 | render() {
19 | const { hideGrandParentsConnectors } = this.state;
20 | const config = {
21 | hideGrandParentsConnectors,
22 | groupTitlePanelSize: 40,
23 | groupTitleFontSize: "14px",
24 | groupTitleColor: "green",
25 | fontFamily: "Areal",
26 | items: [
27 | { id: 1, title: "Thomas Williams", label: "Thomas Williams", groupTitle: "Great Grand Parent", description: "Great Grand Parent", image: "./photos/g.png" },
28 | { id: 2, parents: [1], title: "Mary Spencer", label: "Mary Spencer", description: "Spouse", image: "./photos/s.png" },
29 | { id: 3, parents: [1], title: "David Kirby", label: "David Kirby", groupTitle: "Grand Parent", description: "Grand Parent", image: "./photos/g.png" },
30 | { id: 4, parents: [1, 3], title: "Brad Williams", label: "Brad Williams", groupTitle: "Parent", description: "Parent", image: "./photos/p.png" },
31 | { id: 5, parents: [1, 4], title: "Mike Kirby", groupTitle: "The node", label: "Mike Kirby", description: "Item connected to grand parents", image: "./photos/c.png" },
32 | { id: 6, parents: [2, 5], title: "Lynette Maloney", label: "Lynette Maloney", description: "Grand Child", image: "./photos/c.png" }
33 |
34 | ],
35 | annotations: [
36 | {
37 | annotationType: AnnotationType.HighlightPath,
38 | items: [5, 1],
39 | color: Colors.Red,
40 | lineWidth: 2,
41 | opacity: 1,
42 | showArrows: true
43 | }
44 | ],
45 | pageFitMode: PageFitMode.None,
46 | cursorItem: 5,
47 | linesWidth: 1,
48 | linesColor: "black",
49 | hasSelectorCheckbox: Enabled.False,
50 | normalLevelShift: 20,
51 | dotLevelShift: 20,
52 | lineLevelShift: 20,
53 | normalItemsInterval: 10,
54 | dotItemsInterval: 20,
55 | lineItemsInterval: 20,
56 | arrowsDirection: GroupByType.Parents,
57 | showExtraArrows: false
58 | };
59 |
60 | return <>
61 | Hide direct connections to grand parents:
62 |
63 |
73 |
74 |
84 |
86 |
88 |
89 | }
90 | }
91 |
92 | export default Sample;
93 |
--------------------------------------------------------------------------------
/docs/CursorTemplate.md:
--------------------------------------------------------------------------------
1 | # Cursor template
2 | Our component is a generic collection control, which supports basic features like single item selection, highlight, and multiple items checking.
3 | The cursor item is a single item selection. The navigation of the diagram depends on the current cursor item. The cursor is supposed to have some visual elements. By default, it is `div` having a solid `2px` border line around it.
4 |
5 | ## Properties:
6 | The component customizes the visual representation of items with `templates`. Every template has customization properties for item content, cursor, and highlight visualizations. By default, if properties are nulls, then the component uses built in default functionality. The following properties customize cursor template:
7 | * `cursorPadding` - Reserves space around item, for example: `{left: 3, top: 3, right: 50, bottom: 3}` will provide extra `50px` on right side of item for cursor content.
8 | * `cursorBorderWidth` - some legacy property, it is used to align cursor position around item properly.
9 | * `onCursorRender` - callback method to render cursor for the current cursor item of the diagram
10 |
11 | See the Item template for more details.
12 |
13 | ## Cursor item & preserving space for context control panel
14 | The cursor template's general idea is to provide a convenient API to place the context control panel as close to the current cursor node as possible. The conventional approach puts the control panel on the diagram's side and changes its content as the user selects a new cursor item. That approach cutoff screen space out of the diagram layout. A similar approach is to draw a context menu panel on top of the diagram on the selected node's side, but this will obstruct other diagram nodes' view. The compromise design expands space around the cursor node and places context controls into that space, so the cursor template provides a padding option to preserve that required space around the cursor node.
15 |
16 | ```JavaScript
17 | import { OrgDiagram } from basicprimitivesreact;
18 | Place Advisers Above Children:
78 |
79 |
89 |
90 |
100 |
102 |
104 |
105 | }
106 | }
107 |
108 | export default Sample;
109 |
--------------------------------------------------------------------------------
/src/Samples/PlaceAssistantsAboveChildren.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { OrgDiagram } from '../Diagrams';
3 | import { Enabled, PageFitMode, GroupByType, OrgItemConfig, ItemType, AdviserPlacementType } from 'basicprimitives';
4 |
5 | class Sample extends Component {
6 | constructor(props) {
7 | super(props);
8 |
9 | this.state = {
10 | placeAssistantsAboveChildren: false
11 | }
12 | }
13 |
14 | onPlaceAssistantsAboveChildrenChanged(placeAssistantsAboveChildren) {
15 | this.setState({ placeAssistantsAboveChildren });
16 | }
17 |
18 | render() {
19 | const { placeAssistantsAboveChildren } = this.state;
20 | const config = {
21 | placeAssistantsAboveChildren,
22 | hasSelectorCheckbox: Enabled.False,
23 | pageFitMode: PageFitMode.None,
24 | arrowsDirection: GroupByType.Children,
25 | items: [
26 | new OrgItemConfig({
27 | id: 0,
28 | parent: null,
29 | title: "James Smith",
30 | description: "Parent Item",
31 | image: "./photos/a.png"
32 | }),
33 | new OrgItemConfig({
34 | id: 5,
35 | parent: 0,
36 | title: "Harry Harter",
37 | description: "Regular Item",
38 | groupTitle: "Regular",
39 | image: "./photos/d.png"
40 | }),
41 | new OrgItemConfig({
42 | id: 6,
43 | parent: 0,
44 | title: "Fritz Stuger",
45 | description: "Regular Item",
46 | groupTitle: "Regular",
47 | image: "./photos/d.png"
48 | }),
49 | new OrgItemConfig({
50 | id: 8,
51 | parent: 0,
52 | itemType: ItemType.Assistant,
53 | adviserPlacementType: AdviserPlacementType.Right,
54 | title: "Ted Lucas",
55 | description: "Assitant Item",
56 | groupTitle: "Assistant",
57 | image: "./photos/c.png"
58 | }),
59 | new OrgItemConfig({
60 | id: 10,
61 | parent: 8,
62 | title: "James Nunnally",
63 | description: "Regular Item",
64 | image: "./photos/d.png"
65 | }),
66 | new OrgItemConfig({
67 | id: 11,
68 | parent: 8,
69 | title: "Robert Canon",
70 | description: "Regular Item",
71 | image: "./photos/d.png"
72 | })
73 | ]
74 | };
75 |
76 | return <>
77 | Place Assistants Above Children:
78 |
79 |
89 |
90 |
100 |
102 |
104 |
105 | }
106 | }
107 |
108 | export default Sample;
109 |
--------------------------------------------------------------------------------
/src/Samples/ItemTemplateLabel.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { OrgDiagram } from '../Diagrams';
3 | import { PageFitMode, Enabled, Colors } from 'basicprimitives';
4 |
5 | class Sample extends Component {
6 | render() {
7 | const config = {
8 | pageFitMode: PageFitMode.None,
9 | cursorItem: 0,
10 | hasSelectorCheckbox: Enabled.True,
11 | normalItemsInterval: 10,
12 | normalLevelShift: 44,
13 | padding: { left: 10, top: 20, right: 10, bottom: 10 },
14 | items: [
15 | { id: 0, parent: null, label: "100%", isVisible: true, description: "Chief Executive Officer (CEO)", email: "davidalt@name.com", image: "./photos/q.png", itemTitleColor: "#4169e1", phone: "(352) 206-7599", title: "David Dalton" },
16 | { id: 1, parent: 0, label: "50%", isVisible: true, description: "Co-Presidents, Platform Products & Services Division", email: "jeanwhit@name.com", image: "./photos/w.png", itemTitleColor: "#4b0082", phone: "(505) 791-1689", title: "Jeanna White" },
17 | { id: 2, parent: 0, label: "50%", isVisible: true, description: "Sr. VP, Server & Tools Division", email: "jameholt@name.com", image: "./photos/e.png", itemTitleColor: "#4b0082", phone: "(262) 215-7998", title: "James Holt" },
18 | { id: 5, parent: 1, label: "25%", isVisible: true, description: "Sr. VP, Software Server System", email: "georduon@name.com", image: "./photos/x.png", itemTitleColor: "#4b0082", phone: "(434) 406-2189", title: "George Duong" },
19 | { id: 6, parent: 1, label: "25%", isVisible: true, description: "VP, Developer Division", email: "ashlrue@name.com", image: "./photos/n.png", itemTitleColor: "#4b0082", phone: "(515) 324-4969", title: "Ashley Rue" },
20 | { id: 7, parent: 2, label: "25%", isVisible: true, description: "VP, Enterprise Access and Security Products Division (EASP)", email: "bonnwede@name.com", image: "./photos/i.png", itemTitleColor: "#4b0082", phone: "(412) 265-2782", title: "Bonnie Wedel" },
21 | { id: 8, parent: 2, label: "25%", isVisible: true, description: "GM, Core File Solutions", email: "melihous@name.com", image: "./photos/p.png", itemTitleColor: "#4b0082", phone: "(630) 887-1188", title: "Melissa Houser" }
22 | ],
23 | defaultTemplateName: "LabelTemplate",
24 | templates: [{
25 | name: "LabelTemplate",
26 | itemSize: { width: 220, height: 120 },
27 | minimizedItemSize: { width: 3, height: 3 },
28 | highlightPadding: { left: 2, top: 2, right: 2, bottom: 2 },
29 | onItemRender: ({ context: itemConfig }) => {
30 | const itemTitleColor = itemConfig.itemTitleColor != null ? itemConfig.itemTitleColor : Colors.RoyalBlue;
31 | return
32 |
;
43 | }
44 | }
45 | ]
46 | };
47 | return
33 |
35 | {itemConfig.title}
34 |
36 | 
37 |
38 | {itemConfig.phone}
39 | {itemConfig.email}
40 | {itemConfig.description}
41 | {itemConfig.label}
42 |
48 |
;
50 | }
51 | }
52 |
53 | export default Sample;
54 |
--------------------------------------------------------------------------------
/docs/SelectingHighlightItem.md:
--------------------------------------------------------------------------------
1 | # Highlight item & Mouse over feedback
2 | Highlight provides visual feedback for mouseover and indicates the current node of keyboard focus in the chart. It is a lightweight operation that does not change the diagram layout. Your application can use highlight API to display some node context information in the side panel.
3 |
4 | Use `OrgConfig.highlightItem` property to set or get the currently highlighted node in the diagram.
5 |
6 | When the end-user moves the mouse cursor, the control may highlight nodes within some space around the cursor defined with the option `highlightGravityRadius`. It is handy when we need to click on a small marker. Still, at the same time, it may decrease the control's performance if the radius is too big because the component finds the nearest node within the area of that radius, and that radius may cover hundreds or thousands of nodes.
7 |
8 | If the user clicks outside of the highlighted item, then control moves the cursor item to it. See `cursorItem` property of the `OrgConfig` or `FamConfig` configuration objects.
9 |
10 | Every node must have a unique id. See `id` property of `OrgItemConfig` configuration object. Use those ids when you set the highlightItem option value.
11 |
12 |
13 | If you need to hide highlight, you have to set the highlightItem option to null. If you need to disable highlight functionality in control, it is useless on mobile devices; you have to change the `navigationMode` option to `NavigationMode.CursorOnly`.
14 |
15 | ```JavaScript
16 | import { OrgDiagram } from basicprimitivesreact;
17 | import { NavigationMode } from basicprimitives;
18 | 1
Oval,
24 | labelSize: new Size(100, 30),
25 | labelPlacement: PlacementType.Right,
26 | shapeType: ShapeType.Oval,
27 | borderColor: Colors.Green,
28 | offset: new Thickness(2, 2, 2, 2),
29 | lineWidth: 2,
30 | selectItems: true,
31 | lineType: LineType.Dashed
32 | },
33 | /* JSON noname object equivalent to ConnectorAnnotationConfig */
34 | {
35 | annotationType: AnnotationType.Shape,
36 | items: [2, 3],
37 | label: <>2
Cross Out,
40 | labelSize: { width: 100, height: 30 },
41 | labelPlacement: PlacementType.Right,
42 | shapeType: ShapeType.CrossOut,
43 | borderColor: Colors.Navy,
44 | offset: { left: 2, top: 2, right: 2, bottom: 2 },
45 | lineWidth: 2,
46 | selectItems: true,
47 | lineType: LineType.Dashed
48 | },
49 | /* prototype based instantiation */
50 | new ShapeAnnotationConfig({
51 | items: [1],
52 | label: <>3
Triangle,
55 | labelSize: new Size(100, 30),
56 | labelPlacement: PlacementType.Bottom,
57 | shapeType: ShapeType.Triangle,
58 | borderColor: Colors.Red,
59 | offset: new Thickness(2, 2, 2, 2),
60 | lineWidth: 2,
61 | selectItems: true,
62 | lineType: LineType.Dashed
63 | })
64 | ,
65 | new BackgroundAnnotationConfig({
66 | items: [2, 3],
67 | borderColor: "#f8e5f9",
68 | fillColor: "#e5f9f8",
69 | lineWidth: 2,
70 | selectItems: true,
71 | includeChildren: true,
72 | lineType: LineType.Dotted,
73 | offset: new Thickness(20, 20, 20, 20)
74 | })
75 | ],
76 | cursorItem: 0,
77 | hasSelectorCheckbox: Enabled.True,
78 | normalItemsInterval: 40 /* defines padding around items of background annotations*/,
79 | arrowsDirection: GroupByType.Parents,
80 | pageFitMode: PageFitMode.None
81 | };
82 |
83 | return <>
84 |
85 |
87 |
88 | }
89 | }
90 |
91 | export default Sample;
92 |
--------------------------------------------------------------------------------
/docs/FamilyConnectorsVisualization.md:
--------------------------------------------------------------------------------
1 | # Family Connectors Visualization
2 | The core difference between the Family diagram and Organizational Chart is the support of multiple parents. This feature derives a lot of complexity and problems. If we look at the organizational chart, we may see that connection lines play no role in the visualization. We don't need to visually trace connection lines between nodes with our eyes to understand their mutual relations. This fact dramatically simplifies the reading of the diagram. The relative node placement on a hierarchical chart, additional spaces between branches, gives a strong visual indication of mutual relations between nodes. When we look at family diagrams supporting multiple parents, this is not the case anymore. Connectors are not secondary elements anymore, now they provide information about relations between nodes, and their excessive number creates visual clutter in the diagram, which makes their visualization virtually useless. Look at the following example of the complete bipartite graph. It has every parent node connected with every child node.
3 |
4 | 
5 |
6 | The complete bipartite graph is an extreme example of family relations. Still, in the case of support of the multiple parents, it is a valid use case, so to eliminate this connection lines mass and make relations more understandable, the control automatically groups connectors into bundles, so it produces the following set of links:
7 |
8 | 
9 |
10 | This visualization is better, but it uncovers another problem. Many parents and children do not let us see them together within screen boundaries, so to make the diagram more compact, our component supports the clustering of the nodes into matrixed formation to occupy the least space possible. To enable nodes clustering into matrixed shape, set the enableMatrixLayout option to true.
11 |
12 | ```JavaScript
13 | import { FamDiagram } from basicprimitivesreact;
14 |
83 |
85 | );
86 | }
87 |
88 | export default App;
89 | ```
90 |
--------------------------------------------------------------------------------
/src/Samples/MultipleFamiliesOrdering.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { FamDiagram } from '../Diagrams';
3 | import { PageFitMode, Enabled, GroupByType, AdviserPlacementType, AnnotationType, Size, ConnectorShapeType, Colors, LineType, ConnectorPlacementType } from 'basicprimitives';
4 |
5 | class Sample extends Component {
6 | render() {
7 | const config = {
8 | pageFitMode: PageFitMode.None,
9 | cursorItem: 2,
10 | linesWidth: 1,
11 | linesColor: "black",
12 | hasSelectorCheckbox: Enabled.False,
13 | arrowsDirection: GroupByType.Parents,
14 | showExtraArrows: false,
15 | items: [
16 | { id: 1, title: "David Dalton", groupTitle: "Family 1", label: "David Dalton", description: "1, Chief Executive Officer (CEO)", phone: "352-206-7599", email: "davidalt@name.com", image: "./photos/q.png", itemTitleColor: "#4169e1" },
17 | { id: 2, relativeItem: 1, placementType: AdviserPlacementType.Right, position: 1, title: "Steven Lacombe", label: "Steven Lacombe", description: "2, GM, Platform Strategy", phone: "805-800-7397", email: "stevlaco@name.com", image: "./photos/a.png", itemTitleColor: "#4b0082" },
18 | { id: 3, parents: [1, 2], title: "Nancy Smith", label: "Nancy Smith", description: "3, GM, Strategic Marketing and Communications", phone: "631-787-3495", email: "nancsmit@name.com", image: "./photos/s.png", itemTitleColor: "#4b0082" },
19 | { id: 4, parents: [3], title: "Ann Smith", label: "Nancy Smith", description: "4, GM, Strategic Marketing and Communications", phone: "631-787-3495", email: "nancsmit@name.com", image: "./photos/s.png", itemTitleColor: "#4b0082" },
20 | { id: 5, parents: [3], title: "Ella Smith", label: "Nancy Smith", description: "5, GM, Strategic Marketing and Communications", phone: "631-787-3495", email: "nancsmit@name.com", image: "./photos/s.png", itemTitleColor: "#4b0082" },
21 |
22 | { id: 10, relativeItem: 1, placementType: AdviserPlacementType.Right, position: 1, title: "David Dalton", groupTitle: "Family 2", label: "David Dalton", description: "Chief Executive Officer (CEO)", phone: "352-206-7599", email: "davidalt@name.com", image: "./photos/q.png", itemTitleColor: "#4169e1" },
23 | { id: 20, relativeItem: 10, placementType: AdviserPlacementType.Right, position: 1, title: "Steven Lacombe", label: "Steven Lacombe", description: "GM, Platform Strategy", phone: "805-800-7397", email: "stevlaco@name.com", image: "./photos/a.png", itemTitleColor: "#4b0082" },
24 | { id: 30, parents: [10, 20], title: "Nancy Smith", label: "Nancy Smith", description: "GM, Strategic Marketing and Communications", phone: "631-787-3495", email: "nancsmit@name.com", image: "./photos/s.png", itemTitleColor: "#4b0082" },
25 | { id: 40, parents: [30], title: "Ann Smith", label: "Nancy Smith", description: "GM, Strategic Marketing and Communications", phone: "631-787-3495", email: "nancsmit@name.com", image: "./photos/s.png", itemTitleColor: "#4b0082" },
26 | { id: 50, parents: [30], title: "Ella Smith", label: "Nancy Smith", description: "GM, Strategic Marketing and Communications", phone: "631-787-3495", email: "nancsmit@name.com", image: "./photos/s.png", itemTitleColor: "#4b0082" }
27 | ],
28 | annotations: [
29 | {
30 | annotationType: AnnotationType.Connector,
31 | fromItem: 3,
32 | toItem: 30,
33 | label: 3
,
34 | labelSize: new Size(40, 20),
35 | connectorShapeType: ConnectorShapeType.OneWay,
36 | color: Colors.Red,
37 | offset: 0,
38 | lineWidth: 2,
39 | lineType: LineType.Dashed,
40 | connectorPlacementType: ConnectorPlacementType.Offbeat,
41 | selectItems: false
42 | }
43 | ]
44 | };
45 |
46 | return
47 |
49 | }
50 | }
51 |
52 | export default Sample;
53 |
--------------------------------------------------------------------------------