Skip to content

Commit 56b732c

Browse files
BasicPrimitivesBasicPrimitives
committed
Added level annotations to demos
1 parent a086aaa commit 56b732c

File tree

21 files changed

+364
-230
lines changed

21 files changed

+364
-230
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,6 @@ yarn start
4242

4343
### License
4444

45-
Copyright (c) 2013 - 2020 Basic Primitives Inc
45+
Copyright (c) 2013 - 2021 Basic Primitives Inc
4646
* [Non-commercial - Free](http://creativecommons.org/licenses/by-nc/3.0/)
4747
* [Commercial and government licenses](http://www.basicprimitives.com/license.pdf)

‎client/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515
"@testing-library/react": "^11.1.0",
1616
"@testing-library/user-event": "^12.1.10",
1717
"axios": "^0.21.0",
18-
"basicprimitives": "^6.0.3",
19-
"basicprimitivesreact": "^6.0.3",
18+
"basicprimitives": "^6.1.0",
19+
"basicprimitivesreact": "^6.1.1",
2020
"blob-stream": "^0.1.3",
2121
"clsx": "^1.1.1",
2222
"codemirror": "^5.58.2",

‎client/src/components/Options/ItemsOrderOption.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const SortableItem = SortableElement(({ value }) => <ListItem button style={{zIn
1818

1919
const SortableList = SortableContainer(({ items }) => (
2020
<List aria-label="children-list">
21-
{items.map((value, index) => (
21+
{items && items.map((value, index) => (
2222
<SortableItem key={`item-${value.id}`} index={index} value={value.title} />
2323
))}
2424
</List>
@@ -28,7 +28,7 @@ class ItemsOrderOption extends Component {
2828
static propTypes = {
2929
onChange: PropTypes.func.isRequired,
3030
propertyName: PropTypes.string.isRequired,
31-
items: PropTypes.arrayOf(PropTypes.any.isRequired).isRequired // eslint-disable-line react/forbid-prop-types
31+
items: PropTypes.arrayOf(PropTypes.any.isRequired) // eslint-disable-line react/forbid-prop-types
3232
};
3333

3434
constructor(props) {

‎client/src/components/Options/options.js‎

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,25 @@ const GroupTitlesOptions = {
8484
{ optionType: "DropDownBoxConfig", name: "groupTitleFontSize", caption: "Font size", options: ["8px", "10px", "12px", "14px", "16px", "18px", "20px"], valueType: "string" },
8585
{ optionType: "DropDownBoxConfig", name: "groupTitleFontWeight", caption: "Font Weight", options: ["normal", "bold"], valueType: "string" },
8686
{ optionType: "DropDownBoxConfig", name: "groupTitleFontStyle", caption: "Font Style", options: ["normal", "italic"], valueType: "string" },
87-
{ optionType: "DropDownBoxConfig", name: "groupTitleFontFamily", caption: "Font Style", options: ["Arial", "Verdana", "Times New Roman", "Serif", "Courier"], valueType: "string" },
87+
{ optionType: "DropDownBoxConfig", name: "groupTitleFontFamily", caption: "Font Style", options: ["Arial", "Verdana", "Times New Roman", "Serif", "Courier"], valueType: "string" }
88+
]
89+
};
90+
const LevelTitlesOptions = {
91+
title: "Level Titles",
92+
namespace: "config",
93+
options: [
94+
{ optionType: "RadioBoxConfig", name: "levelTitlePlacementType", caption: "Placement", options: AdviserPlacementType, valueType: "number" },
95+
{ optionType: "DropDownBoxConfig", name: "levelTitlePanelSize", caption: "Level titles panel width", options: [24, 48, 72], valueType: "number" },
96+
{ optionType: "CheckBoxConfig", name: "levelTitlePlaceInside", caption: "Place titles inside view port area" },
97+
{ optionType: "RadioBoxConfig", name: "levelTitleOrientation", caption: "Orientation", options: TextOrientationType, valueType: "number" },
98+
{ optionType: "RadioBoxConfig", name: "levelTitleVerticalAlignment", caption: "Vertical Alignment", options: VerticalAlignmentType, valueType: "number" },
99+
{ optionType: "RadioBoxConfig", name: "levelTitleHorizontalAlignment", caption: "Horizontal Alignment", options: HorizontalAlignmentType, valueType: "number" },
100+
{ optionType: "DropDownBoxConfig", name: "levelTitleColor", caption: "Background Color", options: Colors, valueType: "string" },
101+
{ optionType: "DropDownBoxConfig", name: "levelTitleFontColor", caption: "Font Color", options: Colors, valueType: "string" },
102+
{ optionType: "DropDownBoxConfig", name: "levelTitleFontSize", caption: "Font size", options: ["8px", "10px", "12px", "14px", "16px", "18px", "20px"], valueType: "string" },
103+
{ optionType: "DropDownBoxConfig", name: "levelTitleFontWeight", caption: "Font Weight", options: ["normal", "bold"], valueType: "string" },
104+
{ optionType: "DropDownBoxConfig", name: "levelTitleFontStyle", caption: "Font Style", options: ["normal", "italic"], valueType: "string" },
105+
{ optionType: "DropDownBoxConfig", name: "levelTitleFontFamily", caption: "Font Style", options: ["Arial", "Verdana", "Times New Roman", "Serif", "Courier"], valueType: "string" }
88106
]
89107
};
90108
const MarkersOptions = {
@@ -251,9 +269,11 @@ const ItemLayoutOptions = {
251269
AdviserPartner: 8
252270
}, valueType: "number" },
253271
{ optionType: "RadioBoxConfig", name: "adviserPlacementType", caption: "Placement", options: AdviserPlacementType, valueType: "number" },
254-
{ optionType: "RadioBoxConfig", name: "childrenPlacementType", caption: "Children Layout", options: ChildrenPlacementType, valueType: "number" }
255-
// { optionType: "CheckBoxConfig", name: "placeAdvisersAboveChildren", caption: "Place advisers above children" },
256-
// { optionType: "CheckBoxConfig", name: "placeAssistantsAboveChildren", caption: "Place assistants above children" }
272+
{ optionType: "RadioBoxConfig", name: "childrenPlacementType", caption: "Children Layout", options: ChildrenPlacementType, valueType: "number" },
273+
{ optionType: "DropDownBoxConfig", name: "levelOffset", caption: "Level Offset", options: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10], valueType: "number", isNullable: true }
274+
//{ optionType: "CheckBoxConfig", name: "placeAdvisersAboveChildren", caption: "Place advisers above children" },
275+
//{ optionType: "CheckBoxConfig", name: "placeAssistantsAboveChildren", caption: "Place assistants above children" }
276+
257277
]
258278
};
259279

@@ -272,6 +292,7 @@ const Options = {
272292
DefaultTemplateOptions,
273293
ConnectorAnnotationOptions,
274294
GroupTitlesOptions,
295+
LevelTitlesOptions,
275296
MarkersOptions,
276297
IntervalsOptions,
277298
ConnectorsOptions,

‎client/src/components/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export const OptionsPanel = optionsPanel;
2323
export const AutoLayoutOptions = options.AutoLayoutOptions;
2424
export const DefaultTemplateOptions = options.DefaultTemplateOptions;
2525
export const GroupTitlesOptions = options.GroupTitlesOptions;
26+
export const LevelTitlesOptions = options.LevelTitlesOptions;
2627
export const MarkersOptions = options.MarkersOptions;
2728
export const IntervalsOptions = options.IntervalsOptions;
2829
export const ConnectorsOptions = options.ConnectorsOptions;

‎client/src/containers/CrossTeamGroup/CrossTeamGroup.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ import useStyles from './styles';
3333
import { AutoLayoutOptions,
3434
DefaultTemplateOptions,
3535
GroupTitlesOptions,
36+
LevelTitlesOptions,
3637
MarkersOptions,
3738
IntervalsOptions,
3839
ConnectorsOptions,
@@ -250,6 +251,7 @@ function CrossTeamGroup() {
250251
optionsPanelConfig={[ AutoLayoutOptions,
251252
DefaultTemplateOptions,
252253
GroupTitlesOptions,
254+
LevelTitlesOptions,
253255
MarkersOptions,
254256
IntervalsOptions,
255257
ConnectorsOptions,

‎client/src/containers/TechTree/TechTree.js‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import { FamilyLayoutOptions,
3131
DefaultTemplateOptions,
3232
ConnectorAnnotationOptions,
3333
GroupTitlesOptions,
34+
LevelTitlesOptions,
3435
MarkersOptions,
3536
IntervalsOptions,
3637
ConnectorsOptions,
@@ -150,20 +151,22 @@ function TechTree() {
150151
config={{
151152
...config,
152153
annotations: (config.annotations && config.annotations.map(annotation => {
153-
const { label, title } = annotation;
154-
if (label != null) {
155-
const { badge, color, title } = annotation.label;
156-
return {
157-
...annotation,
158-
label: <><div className={styles.Badge} style={{
159-
backgroundColor: color
160-
}}>{badge}</div><span className={styles.BadgeLabel}>{title}</span></>
154+
if(annotation.annotationType !== AnnotationType.Level) {
155+
const { label, title } = annotation;
156+
if (label != null) {
157+
const { badge, color, title } = annotation.label;
158+
return {
159+
...annotation,
160+
label: <><div className={styles.Badge} style={{
161+
backgroundColor: color
162+
}}>{badge}</div><span className={styles.BadgeLabel}>{title}</span></>
163+
}
161164
}
162-
}
163-
if (title != null) {
164-
return {
165-
...annotation,
166-
title: <div className={styles.InLayoutLabel}>{title}</div>
165+
if (title != null) {
166+
return {
167+
...annotation,
168+
title: <div className={styles.InLayoutLabel}>{title}</div>
169+
}
167170
}
168171
}
169172
return annotation;
@@ -229,6 +232,7 @@ function TechTree() {
229232
DefaultTemplateOptions,
230233
ConnectorAnnotationOptions,
231234
GroupTitlesOptions,
235+
LevelTitlesOptions,
232236
MarkersOptions,
233237
IntervalsOptions,
234238
ConnectorsOptions,

‎client/src/containers/VerticalLayout/VerticalLayout.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ import useStyles from './styles';
3636
import { AutoLayoutOptions,
3737
DefaultTemplateOptions,
3838
GroupTitlesOptions,
39+
LevelTitlesOptions,
3940
MarkersOptions,
4041
IntervalsOptions,
4142
ConnectorsOptions,
@@ -265,6 +266,7 @@ function VerticalLayout() {
265266
optionsPanelConfig={[ AutoLayoutOptions,
266267
DefaultTemplateOptions,
267268
GroupTitlesOptions,
269+
LevelTitlesOptions,
268270
MarkersOptions,
269271
IntervalsOptions,
270272
ConnectorsOptions,

‎client/src/redux/modules/demos/crossteamgroup.js‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { OrgConfig, TemplateConfig, Size, Thickness, PageFitMode,
22
Enabled, ShapeType, LineType, OrientationType, VerticalAlignmentType, HorizontalAlignmentType,
33
ChildrenPlacementType, Visibility, SelectionPathMode, Colors,
44
AdviserPlacementType, TextOrientationType, GroupByType, ConnectorType,
5-
ElbowType, PlacementType, NavigationMode, GraphicsType} from 'basicprimitives';
5+
ElbowType, PlacementType, NavigationMode, GraphicsType, AnnotationType} from 'basicprimitives';
66

77
const LOAD = 'redux-example/crossteamgroup/LOAD';
88
const LOAD_SUCCESS = 'redux-example/crossteamgroup/LOAD_SUCCESS';
@@ -220,11 +220,30 @@ export default function reducer(state = initialState, action = {}) {
220220
const { config: { scale } } = state;
221221
const { config: defaultConfig } = initialState;
222222
const config = action.result;
223+
224+
var annotations = [];
225+
for(var index = 0; index < 10; index+=1) {
226+
annotations.push({
227+
annotationType: AnnotationType.Level,
228+
levels: [index],
229+
title: "Level " + index,
230+
titleColor: Colors.RoyalBlue,
231+
offset: new Thickness(0, 4, 0, -5),
232+
lineWidth: new Thickness(0, 0, 0, 0),
233+
opacity: (index % 2 > 0 ? 0.08 : 0),
234+
borderColor: Colors.Black,
235+
fillColor: Colors.Gray,
236+
lineType: LineType.Dotted
237+
})
238+
}
239+
223240
const newConfig = {
224241
...defaultConfig,
225242
...config,
243+
annotations,
226244
scale
227245
};
246+
228247
return {
229248
...state,
230249
loading: false,

‎client/src/redux/modules/demos/techtree.js‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,20 @@ const initialState = {
100100
groupTitleFontWeight: 'normal',
101101
groupTitleFontStyle: 'normal',
102102

103+
/* level title options */
104+
levelTitlePanelSize: 24,
105+
levelTitlePlaceInside: false,
106+
levelTitlePlacementType: AdviserPlacementType.Left,
107+
levelTitleOrientation: TextOrientationType.Auto,
108+
levelTitleVerticalAlignment: VerticalAlignmentType.Middle,
109+
levelTitleHorizontalAlignment: HorizontalAlignmentType.Center,
110+
levelTitleFontSize: '12px',
111+
levelTitleFontFamily: 'Arial',
112+
levelTitleColor: Colors.RoyalBlue,
113+
levelTitleFontColor: Colors.White,
114+
levelTitleFontWeight: 'normal',
115+
levelTitleFontStyle: 'normal',
116+
103117
/* Family Diagram Specific Options */
104118
neighboursSelectionMode: NeighboursSelectionMode.ParentsChildrenSiblingsAndSpouses,
105119
groupByType: GroupByType.Parents,
@@ -209,8 +223,19 @@ function getAnnotations(config) {
209223
const { items } = config;
210224
if (Array.isArray(items)) {
211225
var annotations = [];
226+
/* create level annotations to show levels of nodes */
227+
for(var index = 0; index < 20; index+=1) {
228+
annotations.push({
229+
annotationType: AnnotationType.Level,
230+
levels: [index],
231+
title: "Level " + index,
232+
offset: new Thickness(0, -1, 0, -1),
233+
opacity: (index % 2 > 0 ? 0.2 : 0)
234+
})
235+
}
236+
212237
// Populate annotations to visualize family ordering references
213-
for (var index = 0; index < items.length; index += 1) {
238+
for (index = 0; index < items.length; index += 1) {
214239
var item = items[index];
215240
if (item.relativeItem != null) {
216241
annotations.push(new ConnectorAnnotationConfig({

0 commit comments

Comments
 (0)