Skip to content

Commit 77f0af0

Browse files
BasicPrimitivesBasicPrimitives
committed
Updated CSS scaling for 4K
1 parent bb01d79 commit 77f0af0

File tree

19 files changed

+62
-15
lines changed

19 files changed

+62
-15
lines changed

‎client/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"prop-types": "^15.7.2",
2828
"react": "^17.0.1",
2929
"react-codemirror2": "^7.2.1",
30+
"react-device-detect": "^2.2.2",
3031
"react-dnd": "^11.1.3",
3132
"react-dnd-html5-backend": "^11.1.3",
3233
"react-dom": "^17.0.1",

‎client/src/containers/CrossBranchAlignment/CrossBranchAlignment.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { batch, useSelector, useDispatch } from 'react-redux';
1818
import MDReactComponent from 'markdown-react-js';
1919
import { OrgDiagram } from 'basicprimitivesreact';
2020
import { Colors } from 'basicprimitives';
21+
import { isMobile } from 'react-device-detect';
2122
import {
2223
load,
2324
loadMarkdown,
@@ -76,7 +77,7 @@ function CrossBranchAlignment() {
7677
dispatch((dispatch, getState) => {
7778
batch(() => {
7879
dispatch(load());
79-
dispatch(setConfigOption('scale', (window.devicePixelRatio > 1 ? 0.5 : 1)));
80+
dispatch(setConfigOption('scale', (isMobile ? 0.5 : 1)));
8081
dispatch(loadMarkdown());
8182
})
8283
}

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { batch, useSelector, useDispatch } from 'react-redux';
1818
import MDReactComponent from 'markdown-react-js';
1919
import { OrgDiagram } from 'basicprimitivesreact';
2020
import { Colors } from 'basicprimitives';
21+
import { isMobile } from 'react-device-detect';
2122
import {
2223
load,
2324
loadMarkdown,
@@ -77,7 +78,7 @@ function CrossTeamGroup() {
7778
dispatch((dispatch, getState) => {
7879
batch(() => {
7980
dispatch(load());
80-
dispatch(setConfigOption('scale', (window.devicePixelRatio > 1 ? 0.5 : 1)));
81+
dispatch(setConfigOption('scale', (isMobile ? 0.5 : 1)));
8182
dispatch(loadMarkdown());
8283
})
8384
}

‎client/src/containers/Dependencies/Dependencies.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import SettingsIcon from '@material-ui/icons/Settings';
2020
import { batch, useSelector, useDispatch } from 'react-redux';
2121
import MDReactComponent from 'markdown-react-js';
2222
import { FamDiagram } from 'basicprimitivesreact';
23+
import { isMobile } from 'react-device-detect';
2324
import { ConnectorAnnotationConfig, AnnotationType, TemplateConfig, Size, Thickness, Colors, highestContrast } from 'basicprimitives';
2425
import {
2526
load,
@@ -82,7 +83,7 @@ function Dependencies() {
8283
dispatch((dispatch, getState) => {
8384
batch(() => {
8485
dispatch(load());
85-
dispatch(setConfigOption('scale', (window.devicePixelRatio > 1 ? 0.5 : 1)));
86+
dispatch(setConfigOption('scale', (isMobile ? 0.5 : 1)));
8687
dispatch(loadMarkdown());
8788
})
8889
}

‎client/src/containers/DynamicLoading/DynamicLoading.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { batch, useSelector, useDispatch } from 'react-redux';
1818
import MDReactComponent from 'markdown-react-js';
1919
import { OrgDiagram } from 'basicprimitivesreact';
2020
import { Colors } from 'basicprimitives';
21+
import { isMobile } from 'react-device-detect';
2122
import {
2223
load,
2324
loadMarkdown,
@@ -73,7 +74,7 @@ function DynamicLoading() {
7374
dispatch((dispatch, getState) => {
7475
batch(() => {
7576
dispatch(load());
76-
dispatch(setConfigOption('scale', (window.devicePixelRatio > 1 ? 0.5 : 1)));
77+
dispatch(setConfigOption('scale', (isMobile ? 0.5 : 1)));
7778
dispatch(loadMarkdown());
7879
})
7980
}

‎client/src/containers/FamilyChartItemsOrdering/FamilyChartItemsOrdering.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { batch, useSelector, useDispatch } from 'react-redux';
1818
import MDReactComponent from 'markdown-react-js';
1919
import { FamDiagram } from 'basicprimitivesreact';
2020
import { Colors, AnnotationType } from 'basicprimitives';
21+
import { isMobile } from 'react-device-detect';
2122
import {
2223
load,
2324
loadMarkdown,
@@ -80,7 +81,7 @@ function FamilyChartItemsOrdering() {
8081
dispatch((dispatch, getState) => {
8182
batch(() => {
8283
dispatch(load());
83-
dispatch(setConfigOption('scale', (window.devicePixelRatio > 1 ? 0.5 : 1)));
84+
dispatch(setConfigOption('scale', (isMobile ? 0.5 : 1)));
8485
dispatch(loadMarkdown());
8586
})
8687
}

‎client/src/containers/FamilyChartWithAnnotations/FamilyChartWithAnnotations.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { batch, useSelector, useDispatch } from 'react-redux';
1818
import MDReactComponent from 'markdown-react-js';
1919
import { FamDiagram } from 'basicprimitivesreact';
2020
import { Colors, AnnotationType } from 'basicprimitives';
21+
import { isMobile } from 'react-device-detect';
2122
import {
2223
load,
2324
loadMarkdown,
@@ -82,7 +83,7 @@ function FamilyChartWithAnnotations() {
8283
dispatch((dispatch, getState) => {
8384
batch(() => {
8485
dispatch(load(datasetName));
85-
dispatch(setConfigOption('scale', (window.devicePixelRatio > 1 ? 0.5 : 1)));
86+
dispatch(setConfigOption('scale', (isMobile ? 0.5 : 1)));
8687
dispatch(loadMarkdown());
8788
})
8889
}

‎client/src/containers/FinancialOwnership/FinancialOwnership.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import SettingsIcon from '@material-ui/icons/Settings';
2020
import { batch, useSelector, useDispatch } from 'react-redux';
2121
import MDReactComponent from 'markdown-react-js';
2222
import { FamDiagram } from 'basicprimitivesreact';
23+
import { isMobile } from 'react-device-detect';
2324
import { ConnectorAnnotationConfig, AnnotationType, TemplateConfig, Size, Thickness, Colors, highestContrast } from 'basicprimitives';
2425
import {
2526
load,
@@ -86,7 +87,7 @@ function FinancialOwnership() {
8687
dispatch((dispatch, getState) => {
8788
batch(() => {
8889
dispatch(load());
89-
dispatch(setConfigOption('scale', (window.devicePixelRatio > 1 ? 0.5 : 1)));
90+
dispatch(setConfigOption('scale', (isMobile ? 0.5 : 1)));
9091
dispatch(loadMarkdown());
9192
})
9293
}

‎client/src/containers/HighlightAnnotations/HighlightAnnotations.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { batch, useSelector, useDispatch } from 'react-redux';
1818
import MDReactComponent from 'markdown-react-js';
1919
import { OrgDiagram } from 'basicprimitivesreact';
2020
import { Colors } from 'basicprimitives';
21+
import { isMobile } from 'react-device-detect';
2122
import {
2223
load,
2324
loadMarkdown,
@@ -77,7 +78,7 @@ function HighlightAnnotations() {
7778
dispatch((dispatch, getState) => {
7879
batch(() => {
7980
dispatch(load());
80-
dispatch(setConfigOption('scale', (window.devicePixelRatio > 1 ? 0.5 : 1)));
81+
dispatch(setConfigOption('scale', (isMobile ? 0.5 : 1)));
8182
dispatch(loadMarkdown());
8283
})
8384
}

‎client/src/containers/LargeHierarchy/LargeHierarchy.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { batch, useSelector, useDispatch } from 'react-redux';
1818
import MDReactComponent from 'markdown-react-js';
1919
import { OrgDiagram } from 'basicprimitivesreact';
2020
import { Colors } from 'basicprimitives';
21+
import { isMobile } from 'react-device-detect';
2122
import {
2223
load,
2324
loadMarkdown,
@@ -76,7 +77,7 @@ function LargeHierarchy() {
7677
dispatch((dispatch, getState) => {
7778
batch(() => {
7879
dispatch(load());
79-
dispatch(setConfigOption('scale', (window.devicePixelRatio > 1 ? 0.5 : 1)));
80+
dispatch(setConfigOption('scale', (isMobile ? 0.5 : 1)));
8081
dispatch(loadMarkdown());
8182
})
8283
}

‎client/src/containers/MutualFinancialOwnership/MutualFinancialOwnership.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { batch, useSelector, useDispatch } from 'react-redux';
2121
import MDReactComponent from 'markdown-react-js';
2222
import { FamDiagram } from 'basicprimitivesreact';
2323
import { ConnectorAnnotationConfig, AnnotationType, TemplateConfig, Size, Thickness, Colors, highestContrast } from 'basicprimitives';
24+
import { isMobile } from 'react-device-detect';
2425
import {
2526
load,
2627
loadMarkdown,
@@ -82,7 +83,7 @@ function MutualFinancialOwnership() {
8283
dispatch((dispatch, getState) => {
8384
batch(() => {
8485
dispatch(load());
85-
dispatch(setConfigOption('scale', (window.devicePixelRatio > 1 ? 0.5 : 1)));
86+
dispatch(setConfigOption('scale', (isMobile ? 0.5 : 1)));
8687
dispatch(loadMarkdown());
8788
})
8889
}

‎client/src/containers/OrgEditor/OrgEditor.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import DialogTitle from '@material-ui/core/DialogTitle';
3131
import useMediaQuery from '@material-ui/core/useMediaQuery';
3232
import MDReactComponent from 'markdown-react-js';
3333
import { OrgDiagram } from 'basicprimitivesreact';
34+
import { isMobile } from 'react-device-detect';
3435
import {
3536
load,
3637
loadMarkdown,
@@ -115,7 +116,7 @@ function OrgEditor() {
115116
dispatch((dispatch, getState) => {
116117
batch(() => {
117118
dispatch(load());
118-
dispatch(setConfigOption('scale', (window.devicePixelRatio > 1 ? 0.5 : 1)));
119+
dispatch(setConfigOption('scale', (isMobile ? 0.5 : 1)));
119120
dispatch(loadMarkdown());
120121
})
121122
}

‎client/src/containers/Partners/Partners.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { batch, useSelector, useDispatch } from 'react-redux';
1818
import MDReactComponent from 'markdown-react-js';
1919
import { OrgDiagram } from 'basicprimitivesreact';
2020
import { Colors } from 'basicprimitives';
21+
import { isMobile } from 'react-device-detect';
2122
import {
2223
load,
2324
loadMarkdown,
@@ -76,7 +77,7 @@ function Partners() {
7677
dispatch((dispatch, getState) => {
7778
batch(() => {
7879
dispatch(load());
79-
dispatch(setConfigOption('scale', (window.devicePixelRatio > 1 ? 0.5 : 1)));
80+
dispatch(setConfigOption('scale', (isMobile ? 0.5 : 1)));
8081
dispatch(loadMarkdown());
8182
})
8283
}

‎client/src/containers/Patents/Patents.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import SettingsIcon from '@material-ui/icons/Settings';
2323
import { batch, useSelector, useDispatch } from 'react-redux';
2424
import MDReactComponent from 'markdown-react-js';
2525
import { FamDiagram } from 'basicprimitivesreact';
26+
import { isMobile } from 'react-device-detect';
2627
import { ConnectorAnnotationConfig, AnnotationType, TemplateConfig, Size, Thickness, Colors, highestContrast } from 'basicprimitives';
2728
import {
2829
load,
@@ -85,7 +86,7 @@ function Patents() {
8586
dispatch((dispatch, getState) => {
8687
batch(() => {
8788
dispatch(load());
88-
dispatch(setConfigOption('scale', (window.devicePixelRatio > 1 ? 0.5 : 1)));
89+
dispatch(setConfigOption('scale', (isMobile ? 0.5 : 1)));
8990
dispatch(loadMarkdown());
9091
})
9192
}

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { batch, useSelector, useDispatch } from 'react-redux';
1515
import MDReactComponent from 'markdown-react-js';
1616
import { FamDiagram } from 'basicprimitivesreact';
1717
import { ConnectorAnnotationConfig, Colors, AnnotationType, TemplateConfig, Size, Thickness, highestContrast } from 'basicprimitives';
18+
import { isMobile } from 'react-device-detect';
1819
import {
1920
load,
2021
loadMarkdown,
@@ -75,7 +76,7 @@ function TechTree() {
7576
dispatch((dispatch, getState) => {
7677
batch(() => {
7778
dispatch(load());
78-
dispatch(setConfigOption('scale', (window.devicePixelRatio > 1 ? 0.5 : 1)));
79+
dispatch(setConfigOption('scale', (isMobile ? 0.5 : 1)));
7980
dispatch(loadMarkdown());
8081
})
8182
}

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import { batch, useSelector, useDispatch } from 'react-redux';
2020
import MDReactComponent from 'markdown-react-js';
2121
import { OrgDiagram } from 'basicprimitivesreact';
2222
import { HorizontalAlignmentType, Colors } from 'basicprimitives';
23+
import { isMobile } from 'react-device-detect';
2324
import {
2425
load,
2526
loadMarkdown,
@@ -79,7 +80,7 @@ function VerticalLayout() {
7980
dispatch((dispatch, getState) => {
8081
batch(() => {
8182
dispatch(load());
82-
dispatch(setConfigOption('scale', (window.devicePixelRatio > 1 ? 0.5 : 1)));
83+
dispatch(setConfigOption('scale', (isMobile ? 0.5 : 1)));
8384
dispatch(loadMarkdown());
8485
})
8586
}

‎client/yarn.lock

+12
Original file line numberDiff line numberDiff line change
@@ -9604,6 +9604,13 @@ react-dev-utils@^11.0.0:
96049604
strip-ansi "6.0.0"
96059605
text-table "0.2.0"
96069606

9607+
react-device-detect@^2.2.2:
9608+
version "2.2.2"
9609+
resolved "https://registry.yarnpkg.com/react-device-detect/-/react-device-detect-2.2.2.tgz#dbabbce798ec359c83f574c3edb24cf1cca641a5"
9610+
integrity sha512-zSN1gIAztUekp5qUT/ybHwQ9fmOqVT1psxpSlTn1pe0CO+fnJHKRLOWWac5nKxOxvOpD/w84hk1I+EydrJp7SA==
9611+
dependencies:
9612+
ua-parser-js "^1.0.2"
9613+
96079614
react-dnd-html5-backend@^11.1.3:
96089615
version "11.1.3"
96099616
resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-11.1.3.tgz#2749f04f416ec230ea193f5c1fbea2de7dffb8f7"
@@ -11503,6 +11510,11 @@ typedarray@^0.0.6:
1150311510
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
1150411511
integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
1150511512

11513+
ua-parser-js@^1.0.2:
11514+
version "1.0.2"
11515+
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.2.tgz#e2976c34dbfb30b15d2c300b2a53eac87c57a775"
11516+
integrity sha512-00y/AXhx0/SsnI51fTc0rLRmafiGOM4/O+ny10Ps7f+j/b8p/ZY11ytMgznXkOVo4GQ+KwQG5UQLkLGirsACRg==
11517+
1150611518
uc.micro@^1.0.1, uc.micro@^1.0.5:
1150711519
version "1.0.6"
1150811520
resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"

‎server/src/services/demoorganizationalcharts/data/matrixlayout.js

+17
Original file line numberDiff line numberDiff line change
@@ -273,6 +273,23 @@ function getMatrixedLeaves() {
273273
});
274274
items.push(manager);
275275

276+
if(counter % 2) {
277+
counter++;
278+
items.push(new OrgItemConfig({
279+
id: counter,
280+
parent: counter - 1,
281+
title: GetNextName(),
282+
description: "Assistant Description",
283+
image: "/api/images/photos/" + groupKey.toLowerCase() + ".png",
284+
itemType: ItemType.Assistant,
285+
adviserPlacementType: AdviserPlacementType.Right,
286+
phone: GetRandomPhone(),
287+
email: GetRandomEmail("Assistant " + counter.toString()),
288+
label: counter.toString(),
289+
groupTitle: "Assistant"
290+
}));
291+
}
292+
276293
for (var levelIndex = 0; levelIndex < group.levels.length; levelIndex += 1) {
277294
var levelSize = group.levels[levelIndex];
278295
for (var index = 0; index < levelSize; index += 1) {

‎server/src/static/orgeditor.md

+2
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,8 @@ This demo application implements nodes Drag & Drop inside of the single diagram
3737
In general, we are against UI functionality based on Drag & Drop in analytical accounting class business applications. Drag & Drop creates a lot of usability issues in applications having transactionality of operations. Applications having document-based UI, Drag & Drop is not a problem. Users can always rollback document changes. When we develop transactional processes, the usage of Drag & Drop may accidentally create unwanted operations. So in transactional applications, Drag & Drop requires confirmation dialogs or transactions queue with a subsequent confirmation dialog to be implemented, which is not convenient and meant to be when we develop Drag & Drop UI.
3838
### Matrix children layout
3939
Usually, organizational charts grow horizontally more than vertically. So keeping nodes in square formation saves horizontal space. It is essential to fit the matrix into the width of the screen. It is OK to scroll nodes vertically or horizontally. The necessity to scroll both ways creates usability issues, so the control has the option `maximumColumnsInMatrix` to limit the maximum number of columns in the matrix formation, so it cannot grow beyond some fixed columns number. For example, when a node has four children, they are matrixed into 2 * 2 matrix, nine children are matrixed into 3 * 3 matrix, 16 into 4 * 4, etc. Still, if we limit the number of columns to 4, 20 children would be matrixed into a 4 * 5 matrix.
40+
### Cross-branch alignment
41+
The individual hierarchies of managerial nodes have different distributions of children into levels, and some of them have assistant nodes. The component has the option `alignBranches` to align children by levels across multiple branches of the entire organizational structure, so children of two different managers having the same level offset are placed to one diagram level.
4042

4143
### Sources
4244
* [UI Components](https://github.com/BasicPrimitives/react-demo/tree/master/client/src/containers/OrgEditor)

0 commit comments

Comments
 (0)