|
| 1 | +import * as React from 'react'; |
| 2 | +import { makeStyles } from '@material-ui/core/styles'; |
| 3 | +import Grid from '@material-ui/core/Grid'; |
| 4 | +import Typography from '@material-ui/core/Typography'; |
| 5 | +import Box from '@material-ui/core/Box'; |
| 6 | +import IconButton from '@material-ui/core/IconButton'; |
| 7 | +import TreeItem from '@material-ui/lab/TreeItem'; |
| 8 | +import Visibility from '@material-ui/icons/Visibility'; |
| 9 | +import VisibilityOff from '@material-ui/icons/VisibilityOff'; |
| 10 | +import ColorLens from '@material-ui/icons/ColorLens'; |
| 11 | +import Shuffle from '@material-ui/icons/Shuffle'; |
| 12 | +import { ChromePicker } from 'react-color'; |
| 13 | +import { useDispatch, useSelector } from 'react-redux'; |
| 14 | +import { experimentLabelColor } from '../../theme'; |
| 15 | +import { changeInstanceColor } from '../../redux/actions/general'; |
| 16 | + |
| 17 | +const useStyles = makeStyles((theme) => ({ |
| 18 | + networkItem: { |
| 19 | + paddingTop: '2px', |
| 20 | + paddingBottom: '2px', |
| 21 | + }, |
| 22 | + controls: { |
| 23 | + '& .MuiIconButton-root': { |
| 24 | + padding: 0, |
| 25 | + marginLeft: '0.5rem', |
| 26 | + color: experimentLabelColor, |
| 27 | + '&:hover': { |
| 28 | + color: 'white', |
| 29 | + }, |
| 30 | + }, |
| 31 | + }, |
| 32 | + colorPicker: { |
| 33 | + position: 'absolute', |
| 34 | + zIndex: 1000, |
| 35 | + right: 0, |
| 36 | + }, |
| 37 | +})); |
| 38 | + |
| 39 | +const ControlPanelTreeItem = (props) => { |
| 40 | + const classes = useStyles(); |
| 41 | + const dispatch = useDispatch(); |
| 42 | + const [showColorPicker, setShowColorPicker] = React.useState(false); |
| 43 | + const [isHoveredOver, setIsHoveredOver] = React.useState(false); |
| 44 | + const [color, setColor] = React.useState({ |
| 45 | + g: 0.50, b: 0.60, r: 1, a: 1, |
| 46 | + }); |
| 47 | + const [visibility, setVisibility] = React.useState(true); |
| 48 | + const instances = useSelector((state) => state.general.instances); |
| 49 | + |
| 50 | + const handleColorSelection = (_color, event, nodeId) => { |
| 51 | + const newInstances = instances.filter((instance) => !(instance.instancePath.startsWith(nodeId))); |
| 52 | + newInstances.push({ |
| 53 | + instancePath: nodeId, |
| 54 | + color: { |
| 55 | + r: _color.rgb.r / 255, |
| 56 | + g: _color.rgb.g / 255, |
| 57 | + b: _color.rgb.b / 255, |
| 58 | + a: _color.rgb.a, |
| 59 | + }, |
| 60 | + }); |
| 61 | + dispatch(changeInstanceColor(newInstances)); |
| 62 | + setColor(_color.rgb); |
| 63 | + }; |
| 64 | + |
| 65 | + const generateRandomColor = (event, nodeId) => { |
| 66 | + const newInstances = instances.filter((instance) => !(instance.instancePath.startsWith(nodeId))); |
| 67 | + const randomColor = { |
| 68 | + r: parseFloat((Math.random() * 255).toFixed(2)), |
| 69 | + g: parseFloat((Math.random() * 255).toFixed(2)), |
| 70 | + b: parseFloat((Math.random() * 255).toFixed(2)), |
| 71 | + a: 1, |
| 72 | + }; |
| 73 | + |
| 74 | + newInstances.push({ |
| 75 | + instancePath: nodeId, |
| 76 | + color: { |
| 77 | + r: randomColor.r / 255, |
| 78 | + g: randomColor.g / 255, |
| 79 | + b: randomColor.b / 255, |
| 80 | + a: randomColor.a, |
| 81 | + }, |
| 82 | + }); |
| 83 | + dispatch(changeInstanceColor(newInstances)); |
| 84 | + setColor(randomColor); |
| 85 | + }; |
| 86 | + |
| 87 | + const changeVisibility = (event, nodeId) => { |
| 88 | + const copiedInstances = instances.slice(); |
| 89 | + let oldIndex = null; |
| 90 | + let oldInstance = copiedInstances.find((pInstance, index) => { |
| 91 | + if (pInstance.instancePath === nodeId) { |
| 92 | + oldIndex = index; |
| 93 | + return true; |
| 94 | + } |
| 95 | + return false; |
| 96 | + }); |
| 97 | + if (!oldInstance) { |
| 98 | + oldInstance = { |
| 99 | + instancePath: nodeId, |
| 100 | + visibility: false, |
| 101 | + }; |
| 102 | + } else { |
| 103 | + copiedInstances.splice(oldIndex, 1); |
| 104 | + oldInstance.visibility = (oldInstance?.visibility !== undefined) ? !oldInstance.visibility : false; |
| 105 | + } |
| 106 | + |
| 107 | + const newInstances = instances.map((instance) => { |
| 108 | + if (!(instance.instancePath.startsWith(nodeId))) { |
| 109 | + return instance; |
| 110 | + } |
| 111 | + const newInstance = instance; |
| 112 | + newInstance.visibility = oldInstance.visibility; |
| 113 | + return newInstance; |
| 114 | + }); |
| 115 | + |
| 116 | + newInstances.push(oldInstance); |
| 117 | + |
| 118 | + dispatch(changeInstanceColor(newInstances)); |
| 119 | + setVisibility(oldInstance.visibility); |
| 120 | + }; |
| 121 | + |
| 122 | + const { |
| 123 | + label, |
| 124 | + type, |
| 125 | + nodeId, |
| 126 | + onNodeSelect, |
| 127 | + onVisibilityClick, |
| 128 | + children, |
| 129 | + ...other |
| 130 | + } = props; |
| 131 | + |
| 132 | + return ( |
| 133 | + <TreeItem |
| 134 | + nodeId={nodeId} |
| 135 | + onLabelClick={(e) => { e.stopPropagation(); e.preventDefault(); }} |
| 136 | + label={( |
| 137 | + <Grid |
| 138 | + container |
| 139 | + className={classes.networkItem} |
| 140 | + onMouseEnter={() => setIsHoveredOver(true)} |
| 141 | + onMouseLeave={() => setIsHoveredOver(false)} |
| 142 | + display="flex" |
| 143 | + flexDirection="row" |
| 144 | + justifyContent="space-between" |
| 145 | + > |
| 146 | + <Grid item xs={4}><Typography onClick={() => onNodeSelect(nodeId)}>{label}</Typography></Grid> |
| 147 | + <Grid item xs={4} justifyContent="center"><Typography>{type}</Typography></Grid> |
| 148 | + <Grid item xs={4} justifyContent="flex-end" className={classes.controls}> |
| 149 | + {isHoveredOver |
| 150 | + ? ( |
| 151 | + <> |
| 152 | + |
| 153 | + <IconButton onClick={(event) => changeVisibility(event, nodeId)}> |
| 154 | + { visibility ? <Visibility /> : <VisibilityOff /> } |
| 155 | + </IconButton> |
| 156 | + <IconButton onClick={(event) => generateRandomColor(event, nodeId)}><Shuffle /></IconButton> |
| 157 | + <IconButton onClick={() => setShowColorPicker(true)}><ColorLens /></IconButton> |
| 158 | + { |
| 159 | + showColorPicker |
| 160 | + ? ( |
| 161 | + <Box |
| 162 | + onMouseLeave={() => setShowColorPicker(false)} |
| 163 | + > |
| 164 | + <ChromePicker |
| 165 | + className={classes.colorPicker} |
| 166 | + color={color} |
| 167 | + onChangeComplete={(color, event) => handleColorSelection(color, event, nodeId)} |
| 168 | + /> |
| 169 | + </Box> |
| 170 | + ) : null |
| 171 | + } |
| 172 | + |
| 173 | + </> |
| 174 | + ) |
| 175 | + : null} |
| 176 | + </Grid> |
| 177 | + </Grid> |
| 178 | + )} |
| 179 | + > |
| 180 | + {children} |
| 181 | + </TreeItem> |
| 182 | + ); |
| 183 | +}; |
| 184 | + |
| 185 | +export default ControlPanelTreeItem; |
0 commit comments