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 }) => { {isGroup && Ajouter une couche} - {isGroup && Ajouter un sous-groupe} + {isGroup && !node.byVariable && ( + Ajouter un sous-groupe + )} {isGroup && Paramètres} Supprimer @@ -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'), + }); + }} + />