Skip to content

Added level annotations to demos #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 3, 2021
Merged

Added level annotations to demos #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,6 @@ yarn start

### License

Copyright (c) 2013 - 2020 Basic Primitives Inc
Copyright (c) 2013 - 2021 Basic Primitives Inc
* [Non-commercial - Free](http://creativecommons.org/licenses/by-nc/3.0/)
* [Commercial and government licenses](http://www.basicprimitives.com/license.pdf)
4 changes: 2 additions & 2 deletions client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"axios": "^0.21.0",
"basicprimitives": "^6.0.3",
"basicprimitivesreact": "^6.0.3",
"basicprimitives": "^6.1.0",
"basicprimitivesreact": "^6.1.1",
"blob-stream": "^0.1.3",
"clsx": "^1.1.1",
"codemirror": "^5.58.2",
Expand Down
4 changes: 2 additions & 2 deletions client/src/components/Options/ItemsOrderOption.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const SortableItem = SortableElement(({ value }) => <ListItem button style={{zIn

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

constructor(props) {
Expand Down
29 changes: 25 additions & 4 deletions client/src/components/Options/options.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,25 @@ const GroupTitlesOptions = {
{ optionType: "DropDownBoxConfig", name: "groupTitleFontSize", caption: "Font size", options: ["8px", "10px", "12px", "14px", "16px", "18px", "20px"], valueType: "string" },
{ optionType: "DropDownBoxConfig", name: "groupTitleFontWeight", caption: "Font Weight", options: ["normal", "bold"], valueType: "string" },
{ optionType: "DropDownBoxConfig", name: "groupTitleFontStyle", caption: "Font Style", options: ["normal", "italic"], valueType: "string" },
{ optionType: "DropDownBoxConfig", name: "groupTitleFontFamily", caption: "Font Style", options: ["Arial", "Verdana", "Times New Roman", "Serif", "Courier"], valueType: "string" },
{ optionType: "DropDownBoxConfig", name: "groupTitleFontFamily", caption: "Font Style", options: ["Arial", "Verdana", "Times New Roman", "Serif", "Courier"], valueType: "string" }
]
};
const LevelTitlesOptions = {
title: "Level Titles",
namespace: "config",
options: [
{ optionType: "RadioBoxConfig", name: "levelTitlePlacementType", caption: "Placement", options: AdviserPlacementType, valueType: "number" },
{ optionType: "DropDownBoxConfig", name: "levelTitlePanelSize", caption: "Level titles panel width", options: [24, 48, 72], valueType: "number" },
{ optionType: "CheckBoxConfig", name: "levelTitlePlaceInside", caption: "Place titles inside view port area" },
{ optionType: "RadioBoxConfig", name: "levelTitleOrientation", caption: "Orientation", options: TextOrientationType, valueType: "number" },
{ optionType: "RadioBoxConfig", name: "levelTitleVerticalAlignment", caption: "Vertical Alignment", options: VerticalAlignmentType, valueType: "number" },
{ optionType: "RadioBoxConfig", name: "levelTitleHorizontalAlignment", caption: "Horizontal Alignment", options: HorizontalAlignmentType, valueType: "number" },
{ optionType: "DropDownBoxConfig", name: "levelTitleColor", caption: "Background Color", options: Colors, valueType: "string" },
{ optionType: "DropDownBoxConfig", name: "levelTitleFontColor", caption: "Font Color", options: Colors, valueType: "string" },
{ optionType: "DropDownBoxConfig", name: "levelTitleFontSize", caption: "Font size", options: ["8px", "10px", "12px", "14px", "16px", "18px", "20px"], valueType: "string" },
{ optionType: "DropDownBoxConfig", name: "levelTitleFontWeight", caption: "Font Weight", options: ["normal", "bold"], valueType: "string" },
{ optionType: "DropDownBoxConfig", name: "levelTitleFontStyle", caption: "Font Style", options: ["normal", "italic"], valueType: "string" },
{ optionType: "DropDownBoxConfig", name: "levelTitleFontFamily", caption: "Font Style", options: ["Arial", "Verdana", "Times New Roman", "Serif", "Courier"], valueType: "string" }
]
};
const MarkersOptions = {
Expand Down Expand Up @@ -251,9 +269,11 @@ const ItemLayoutOptions = {
AdviserPartner: 8
}, valueType: "number" },
{ optionType: "RadioBoxConfig", name: "adviserPlacementType", caption: "Placement", options: AdviserPlacementType, valueType: "number" },
{ optionType: "RadioBoxConfig", name: "childrenPlacementType", caption: "Children Layout", options: ChildrenPlacementType, valueType: "number" }
// { optionType: "CheckBoxConfig", name: "placeAdvisersAboveChildren", caption: "Place advisers above children" },
// { optionType: "CheckBoxConfig", name: "placeAssistantsAboveChildren", caption: "Place assistants above children" }
{ optionType: "RadioBoxConfig", name: "childrenPlacementType", caption: "Children Layout", options: ChildrenPlacementType, valueType: "number" },
{ optionType: "DropDownBoxConfig", name: "levelOffset", caption: "Level Offset", options: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10], valueType: "number", isNullable: true }
//{ optionType: "CheckBoxConfig", name: "placeAdvisersAboveChildren", caption: "Place advisers above children" },
//{ optionType: "CheckBoxConfig", name: "placeAssistantsAboveChildren", caption: "Place assistants above children" }

]
};

Expand All @@ -272,6 +292,7 @@ const Options = {
DefaultTemplateOptions,
ConnectorAnnotationOptions,
GroupTitlesOptions,
LevelTitlesOptions,
MarkersOptions,
IntervalsOptions,
ConnectorsOptions,
Expand Down
1 change: 1 addition & 0 deletions client/src/components/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export const OptionsPanel = optionsPanel;
export const AutoLayoutOptions = options.AutoLayoutOptions;
export const DefaultTemplateOptions = options.DefaultTemplateOptions;
export const GroupTitlesOptions = options.GroupTitlesOptions;
export const LevelTitlesOptions = options.LevelTitlesOptions;
export const MarkersOptions = options.MarkersOptions;
export const IntervalsOptions = options.IntervalsOptions;
export const ConnectorsOptions = options.ConnectorsOptions;
Expand Down
2 changes: 2 additions & 0 deletions client/src/containers/CrossTeamGroup/CrossTeamGroup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ import useStyles from './styles';
import { AutoLayoutOptions,
DefaultTemplateOptions,
GroupTitlesOptions,
LevelTitlesOptions,
MarkersOptions,
IntervalsOptions,
ConnectorsOptions,
Expand Down Expand Up @@ -250,6 +251,7 @@ function CrossTeamGroup() {
optionsPanelConfig={[ AutoLayoutOptions,
DefaultTemplateOptions,
GroupTitlesOptions,
LevelTitlesOptions,
MarkersOptions,
IntervalsOptions,
ConnectorsOptions,
Expand Down
30 changes: 17 additions & 13 deletions client/src/containers/TechTree/TechTree.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import { FamilyLayoutOptions,
DefaultTemplateOptions,
ConnectorAnnotationOptions,
GroupTitlesOptions,
LevelTitlesOptions,
MarkersOptions,
IntervalsOptions,
ConnectorsOptions,
Expand Down Expand Up @@ -150,20 +151,22 @@ function TechTree() {
config={{
...config,
annotations: (config.annotations && config.annotations.map(annotation => {
const { label, title } = annotation;
if (label != null) {
const { badge, color, title } = annotation.label;
return {
...annotation,
label: <><div className={styles.Badge} style={{
backgroundColor: color
}}>{badge}</div><span className={styles.BadgeLabel}>{title}</span></>
if(annotation.annotationType !== AnnotationType.Level) {
const { label, title } = annotation;
if (label != null) {
const { badge, color, title } = annotation.label;
return {
...annotation,
label: <><div className={styles.Badge} style={{
backgroundColor: color
}}>{badge}</div><span className={styles.BadgeLabel}>{title}</span></>
}
}
}
if (title != null) {
return {
...annotation,
title: <div className={styles.InLayoutLabel}>{title}</div>
if (title != null) {
return {
...annotation,
title: <div className={styles.InLayoutLabel}>{title}</div>
}
}
}
return annotation;
Expand Down Expand Up @@ -229,6 +232,7 @@ function TechTree() {
DefaultTemplateOptions,
ConnectorAnnotationOptions,
GroupTitlesOptions,
LevelTitlesOptions,
MarkersOptions,
IntervalsOptions,
ConnectorsOptions,
Expand Down
2 changes: 2 additions & 0 deletions client/src/containers/VerticalLayout/VerticalLayout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ import useStyles from './styles';
import { AutoLayoutOptions,
DefaultTemplateOptions,
GroupTitlesOptions,
LevelTitlesOptions,
MarkersOptions,
IntervalsOptions,
ConnectorsOptions,
Expand Down Expand Up @@ -265,6 +266,7 @@ function VerticalLayout() {
optionsPanelConfig={[ AutoLayoutOptions,
DefaultTemplateOptions,
GroupTitlesOptions,
LevelTitlesOptions,
MarkersOptions,
IntervalsOptions,
ConnectorsOptions,
Expand Down
21 changes: 20 additions & 1 deletion client/src/redux/modules/demos/crossteamgroup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { OrgConfig, TemplateConfig, Size, Thickness, PageFitMode,
Enabled, ShapeType, LineType, OrientationType, VerticalAlignmentType, HorizontalAlignmentType,
ChildrenPlacementType, Visibility, SelectionPathMode, Colors,
AdviserPlacementType, TextOrientationType, GroupByType, ConnectorType,
ElbowType, PlacementType, NavigationMode, GraphicsType} from 'basicprimitives';
ElbowType, PlacementType, NavigationMode, GraphicsType, AnnotationType} from 'basicprimitives';

const LOAD = 'redux-example/crossteamgroup/LOAD';
const LOAD_SUCCESS = 'redux-example/crossteamgroup/LOAD_SUCCESS';
Expand Down Expand Up @@ -220,11 +220,30 @@ export default function reducer(state = initialState, action = {}) {
const { config: { scale } } = state;
const { config: defaultConfig } = initialState;
const config = action.result;

var annotations = [];
for(var index = 0; index < 10; index+=1) {
annotations.push({
annotationType: AnnotationType.Level,
levels: [index],
title: "Level " + index,
titleColor: Colors.RoyalBlue,
offset: new Thickness(0, 4, 0, -5),
lineWidth: new Thickness(0, 0, 0, 0),
opacity: (index % 2 > 0 ? 0.08 : 0),
borderColor: Colors.Black,
fillColor: Colors.Gray,
lineType: LineType.Dotted
})
}

const newConfig = {
...defaultConfig,
...config,
annotations,
scale
};

return {
...state,
loading: false,
Expand Down
27 changes: 26 additions & 1 deletion client/src/redux/modules/demos/techtree.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,20 @@ const initialState = {
groupTitleFontWeight: 'normal',
groupTitleFontStyle: 'normal',

/* level title options */
levelTitlePanelSize: 24,
levelTitlePlaceInside: false,
levelTitlePlacementType: AdviserPlacementType.Left,
levelTitleOrientation: TextOrientationType.Auto,
levelTitleVerticalAlignment: VerticalAlignmentType.Middle,
levelTitleHorizontalAlignment: HorizontalAlignmentType.Center,
levelTitleFontSize: '12px',
levelTitleFontFamily: 'Arial',
levelTitleColor: Colors.RoyalBlue,
levelTitleFontColor: Colors.White,
levelTitleFontWeight: 'normal',
levelTitleFontStyle: 'normal',

/* Family Diagram Specific Options */
neighboursSelectionMode: NeighboursSelectionMode.ParentsChildrenSiblingsAndSpouses,
groupByType: GroupByType.Parents,
Expand Down Expand Up @@ -209,8 +223,19 @@ function getAnnotations(config) {
const { items } = config;
if (Array.isArray(items)) {
var annotations = [];
/* create level annotations to show levels of nodes */
for(var index = 0; index < 20; index+=1) {
annotations.push({
annotationType: AnnotationType.Level,
levels: [index],
title: "Level " + index,
offset: new Thickness(0, -1, 0, -1),
opacity: (index % 2 > 0 ? 0.2 : 0)
})
}

// Populate annotations to visualize family ordering references
for (var index = 0; index < items.length; index += 1) {
for (index = 0; index < items.length; index += 1) {
var item = items[index];
if (item.relativeItem != null) {
annotations.push(new ConnectorAnnotationConfig({
Expand Down
14 changes: 14 additions & 0 deletions client/src/redux/modules/demos/verticallayoutorganizationalchart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,20 @@ const initialState = {
groupTitleFontWeight: 'normal',
groupTitleFontStyle: 'normal',

/* level title options */
levelTitlePanelSize: 24,
levelTitlePlaceInside: false,
levelTitlePlacementType: AdviserPlacementType.Left,
levelTitleOrientation: TextOrientationType.Auto,
levelTitleVerticalAlignment: VerticalAlignmentType.Middle,
levelTitleHorizontalAlignment: HorizontalAlignmentType.Center,
levelTitleFontSize: '12px',
levelTitleFontFamily: 'Arial',
levelTitleColor: Colors.RoyalBlue,
levelTitleFontColor: Colors.White,
levelTitleFontWeight: 'normal',
levelTitleFontStyle: 'normal',

/* Intervals */
normalLevelShift: 20,
dotLevelShift: 30,
Expand Down
18 changes: 9 additions & 9 deletions client/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2862,17 +2862,17 @@ base@^0.11.1:
mixin-deep "^1.2.0"
pascalcase "^0.1.1"

basicprimitives@6.0.3, basicprimitives@^6.0.3:
version "6.0.3"
resolved "https://registry.yarnpkg.com/basicprimitives/-/basicprimitives-6.0.3.tgz#8cd72565aa2c4f05acc216a48d0d571bf975b9d4"
integrity sha512-q7jiMXQvgUv++t0YDCUEWjIF+rjVaJhfwdlZaXoUMVtb/pfaf0BrbpLgjTsVQPkMNW+p2+y+joHCgBpD6SMEQA==
basicprimitives@6.1.0, basicprimitives@^6.1.0:
version "6.1.0"
resolved "https://registry.yarnpkg.com/basicprimitives/-/basicprimitives-6.1.0.tgz#1c3c036f25b27b053b5e886e7e771ff05550361f"
integrity sha512-tsxBraeJrGjb0mA177H2f+8ykhrTroFZ2XBLCBb+WHcvR6KsN2s+UR1OptyusvnCZAQkx907U9xhhDqMAF1tNA==

basicprimitivesreact@^6.0.3:
version "6.0.3"
resolved "https://registry.yarnpkg.com/basicprimitivesreact/-/basicprimitivesreact-6.0.3.tgz#cd21d423e9b93b0427c6094669f22b52ead3c101"
integrity sha512-OYFwvzVDQiWQwun7Y7l38sFuGrqlLeVMzt8nt25A7C/Hgg5c29gHHKybQJQhv4EeSeTYsNxv2YLr1onzcx07Bw==
basicprimitivesreact@^6.1.1:
version "6.1.1"
resolved "https://registry.yarnpkg.com/basicprimitivesreact/-/basicprimitivesreact-6.1.1.tgz#82e3f9c1762eaee42f7112dda5366f76f3ca2119"
integrity sha512-FQkH3aaMbMRBzrRnctP5uCfyPr4fVL6b8urCc9S8TfAtgvRjWw4gYT68NHm9F6iNJJbsoIjDVHY4XqcxfkrYBQ==
dependencies:
basicprimitives "6.0.3"
basicprimitives "6.1.0"
resize-observer-polyfill "^1.5.1"

batch@0.6.1:
Expand Down
2 changes: 1 addition & 1 deletion server/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
"@feathersjs/rest-client": "^1.3.2",
"@feathersjs/socketio": "^3.0.1",
"@feathersjs/socketio-client": "^1.0.1",
"basicprimitives": "6.0.3",
"basicprimitives": "6.1.0",
"compression": "^1.6.2",
"cookie-parser": "^1.4.3",
"cookies-js": "^1.2.3",
Expand Down
Loading