diff --git a/src/modules/RA/Scene/assets/List.svg b/src/modules/RA/Scene/assets/List.svg
new file mode 100644
index 000000000..7b0fe2133
--- /dev/null
+++ b/src/modules/RA/Scene/assets/List.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/modules/RA/Scene/components/TreeInput.js b/src/modules/RA/Scene/components/TreeInput.js
index ed1c98fb1..e08e800a0 100644
--- a/src/modules/RA/Scene/components/TreeInput.js
+++ b/src/modules/RA/Scene/components/TreeInput.js
@@ -35,6 +35,7 @@ const generateNodeProps = (treeData, setTreeData, includeIds) =>
className: classnames({
treeGroup: node.group,
treeGroupExclusive: node.exclusive,
+ treeGroupByVariable: node.byVariable,
}),
buttons: [],
};
@@ -91,7 +92,7 @@ const TreeInput = ({ input: { value, onChange }, ...props }) => {
*/
const addGroup = () => onChange([
...value,
- { label: 'New group name', group: true },
+ { label: 'New group name', group: true, children: [], expanded: true },
]);
if (!value) {
diff --git a/src/modules/RA/Scene/components/TreeInput.scss b/src/modules/RA/Scene/components/TreeInput.scss
index 81952e100..c664e18cc 100644
--- a/src/modules/RA/Scene/components/TreeInput.scss
+++ b/src/modules/RA/Scene/components/TreeInput.scss
@@ -31,4 +31,10 @@
background-image: url(../assets/RadioButton.svg);
}
}
+
+ &ByVariable {
+ .rst__moveHandle {
+ background-image: url(../assets/List.svg);
+ }
+ }
}
diff --git a/src/modules/RA/Scene/components/TreeNodeToolbar.js b/src/modules/RA/Scene/components/TreeNodeToolbar.js
index ff8ada1c2..d1a24f0a9 100644
--- a/src/modules/RA/Scene/components/TreeNodeToolbar.js
+++ b/src/modules/RA/Scene/components/TreeNodeToolbar.js
@@ -4,6 +4,7 @@ import {
addNodeUnderParent,
removeNodeAtPath,
changeNodeAtPath,
+ getNodeAtPath,
getFlatDataFromTree,
} from 'react-sortable-tree';
@@ -16,7 +17,10 @@ import FormControl from '@material-ui/core/FormControl';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import Modal from '@material-ui/core/Modal';
-import Switch from '@material-ui/core/Switch';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Radio from '@material-ui/core/Radio';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import TextField from '@material-ui/core/TextField';
import MoreVertIcon from '@material-ui/icons/MoreVert';
import GeolayerSelect from './GeolayerSelect';
@@ -54,6 +58,18 @@ const TreeNodeToolbar = ({ treeData, setTreeData, path, node, includeIds }) => {
const [newLayerProps, setNewLayerProps] = React.useState({});
const [groupNewSettings, setGroupNewSettings] = React.useState({});
+ React.useEffect(
+ () => {
+ if (displaySettingsModal.node) {
+ setGroupNewSettings({
+ exclusive: Boolean(displaySettingsModal.node.exclusive),
+ byVariable: Boolean(displaySettingsModal.node.byVariable),
+ variables: displaySettingsModal.node.variables || [],
+ });
+ }
+ },
+ [displaySettingsModal],
+ );
const handleClick = ({ currentTarget }) => setAnchorEl(currentTarget);
const closeMenu = () => setAnchorEl(null);
@@ -130,7 +146,11 @@ const TreeNodeToolbar = ({ treeData, setTreeData, path, node, includeIds }) => {
*/
const openSettingsModal = () => {
closeMenu();
- setDisplaySettingsModal(true);
+ setDisplaySettingsModal(getNodeAtPath({
+ treeData,
+ path,
+ getNodeKey: ({ treeIndex }) => treeIndex,
+ }));
};
/**
@@ -148,9 +168,14 @@ const TreeNodeToolbar = ({ treeData, setTreeData, path, node, includeIds }) => {
setDisplaySettingsModal(false);
};
- const isGroupExclusive = typeof groupNewSettings.exclusive !== 'undefined'
- ? groupNewSettings.exclusive
- : node.exclusive;
+ const getRadioValue = React.useCallback(
+ () => {
+ if (groupNewSettings.byVariable) { return 'byVariable'; }
+ return groupNewSettings.exclusive ? 'exclusive' : 'inclusive';
+ },
+ [groupNewSettings.byVariable, groupNewSettings.exclusive],
+ );
+ const radioValue = getRadioValue();
/**
* Array of all nodes in treeData
@@ -177,7 +202,9 @@ const TreeNodeToolbar = ({ treeData, setTreeData, path, node, includeIds }) => {
@@ -203,17 +230,53 @@ const TreeNodeToolbar = ({ treeData, setTreeData, path, node, includeIds }) => {
+
+ Mode de sélection des couches
+ {
+ switch (choice) {
+ case 'inclusive':
+ setGroupNewSettings(
+ { ...groupNewSettings, exclusive: false, byVariable: false },
+ );
+ break;
+ case 'exclusive':
+ setGroupNewSettings(
+ { ...groupNewSettings, exclusive: true, byVariable: false },
+ );
+ break;
+ case 'byVariable':
+ setGroupNewSettings(
+ { ...groupNewSettings, exclusive: true, byVariable: true },
+ );
+ break;
+ default:
+ }
+ }}
+ >
+ } label="Inclusif" />
+ } label="Exclusif" />
+ } label="Par variables" />
+
+
+
- Mode de sélection des couches
-
- Inclusif
-
- setGroupNewSettings({ ...groupNewSettings, exclusive })}
- />
- Exclusif
-
+ {
+ setGroupNewSettings({
+ ...groupNewSettings,
+ variables: event.target.value.split('\n'),
+ });
+ }}
+ />