Merge pull request #610 from MetaCell/feature/541

Feature/541

Author: ddelpiano

webapp/components/general/ControlPanelTreeItem.js

@@ -17,8 +17,7 @@ import {
 } from '../../theme';
 import {
   RandomColorLensIcon,
-  ColorLensIcon,
-  TriangleIcon,
+  SquareIcon,
 } from './NetPyNEIcons';
 import { changeInstanceColor } from '../../redux/actions/general';
 
@@ -55,7 +54,7 @@ const useStyles = makeStyles((theme) => ({
   colorPickerBox: {
     position: 'absolute',
     top: '1.6rem',
-    right: '2.7rem',
+    right: '0',
     height: '3rem',
   },
   triangleIcon: {
@@ -65,7 +64,7 @@ const useStyles = makeStyles((theme) => ({
   colorPicker: {
     position: 'absolute',
     zIndex: 1000,
-    right: 0,
+    right: '0',
     backgroundColor: `${bgDarker} !important`,
     padding: '0.2rem',
     '& label': {
@@ -117,42 +116,79 @@ const ControlPanelTreeItem = (props) => {
   const dispatch = useDispatch();
   const [showColorPicker, setShowColorPicker] = React.useState(false);
   const [isHoveredOver, setIsHoveredOver] = React.useState(false);
-  const [color, setColor] = React.useState({
-    g: 0.50, b: 0.60, r: 1, a: 1,
-  });
   const [visibility, setVisibility] = React.useState(true);
   const instances = useSelector((state) => state.general.instances);
+  const defaultColor = {
+    g: 0.50,
+    b: 0.60,
+    r: 1,
+    a: 1,
+    hex: "#FF7F99"
+  };
 
-  const handleColorSelection = (_color, event, nodeId) => {
-    const newInstances = instances.filter((instance) => !(instance.instancePath.startsWith(nodeId)));
-    newInstances.push({
+  const getColor = (nodeId) => {
+    const insts = instances.filter((instance) => instance.instancePath === nodeId);
+    const hasChildren = instances.some((instance) => instance.instancePath.startsWith(nodeId) && instance.instancePath !== nodeId);
+    if (props.children.length === 0 && insts.length > 0 && "color" in insts[0]) {
+      return insts[0].color
+    }
+    // we check if all children have the same color
+    const children = instances.filter((instance) => instance.instancePath.startsWith(nodeId) && instance.instancePath !== nodeId);
+    if (children.length === 0) {
+      return defaultColor;
+    }
+    const color = children[0].color;
+    if (children.every(x => x.color && x.color.hex === color.hex)) {
+      return color
+    }
+    return { hex: "#989898" }
+  }
+
+  const randomColor = () => {
+    const [r, g, b] = [Math.random() * 255, Math.random() * 255, Math.random() * 255];
+    return {
+      r: parseFloat(r.toFixed(2)),
+      g: parseFloat(g.toFixed(2)),
+      b: parseFloat(b.toFixed(2)),
+      a: 1,
+      hex: "#" + (r >> 0).toString(16) + (g >> 0).toString(16) + (b >> 0).toString(16)
+    }
+  }
+
+  const translateColor = (_color) => {
+     return {
+        r: _color.r / 255,
+        g: _color.g / 255,
+        b: _color.b / 255,
+        a: _color.a,
+        hex: _color.hex
+      }
+  }
+
+  const collectAllChildren = (instance) => {
+    const children = [...instance.getChildren()]
+    children.forEach(child => children.push(...collectAllChildren(child)))
+    return children
+  }
+
+  const handleLeafColorChange = (event, nodeId, colorGenerator) => {
+    const updateInstances = instances.filter((instance) => !instance.pathInstance.startsWith(nodeId));
+    updateInstances.push({
       instancePath: nodeId,
-      color: {
-        r: _color.rgb.r / 255,
-        g: _color.rgb.g / 255,
-        b: _color.rgb.b / 255,
-        a: _color.rgb.a,
-      },
+      color: translateColor(colorGenerator())
     });
-    dispatch(changeInstanceColor(newInstances));
-    setColor(_color.rgb);
-    event.stopPropagation();
-    event.preventDefault();
-  };
-
-  const getRandomColor = () => ({
-    r: parseFloat((Math.random() * 255).toFixed(2)),
-    g: parseFloat((Math.random() * 255).toFixed(2)),
-    b: parseFloat((Math.random() * 255).toFixed(2)),
-    a: 1,
-  });
+    dispatch(changeInstanceColor(updateInstances));
+  }
 
-  const generateRandomColor = (event, nodeId) => {
+  const handleContainerColorChange = (event, nodeId, colorGenerator) => {
     event.stopPropagation();
     event.preventDefault();
-    const children = window.Instances.getInstance(nodeId).getChildren().map((instance) => instance.getInstancePath());
-    // const newInstances = instances.filter((instance) => !(instance.instancePath.startsWith(nodeId)));
-    const newInstances = instances.filter((instance) => {
+
+    const childrenPaths = collectAllChildren(window.Instances.getInstance(nodeId))
+                            .filter((instance) => !instance.getChildren() || instance.getChildren().length === 0)
+                            .map((instance) => instance.getInstancePath());
+    const children = childrenPaths.filter((path) => path.startsWith(nodeId));
+    const updateInstances = instances.filter((instance) => {
       let condition = true;
       children.forEach((child) => {
         if (instance.instancePath.startsWith(child)) {
@@ -161,21 +197,22 @@ const ControlPanelTreeItem = (props) => {
       });
       return condition;
     });
-
     children.forEach((child) => {
-      const randomColor = getRandomColor();
-      newInstances.push({
+      updateInstances.push({
         instancePath: child,
-        color: {
-          r: randomColor.r / 255,
-          g: randomColor.g / 255,
-          b: randomColor.b / 255,
-          a: randomColor.a,
-        },
+        color: translateColor(colorGenerator())
       });
     });
-    dispatch(changeInstanceColor(newInstances));
-  };
+    dispatch(changeInstanceColor(updateInstances));
+  }
+
+  const handleColorChange = (event, nodeId, colorGenerator) => {
+    if (props.children.length === 0) {
+      handleLeafColorChange(event, nodeId, colorGenerator);
+      return
+    }
+    handleContainerColorChange(event, nodeId, colorGenerator);
+  }
 
   const changeVisibility = (event, nodeId) => {
     event.stopPropagation();
@@ -232,8 +269,8 @@ const ControlPanelTreeItem = (props) => {
       label={(
         <Grid
           container
-          onMouseEnter={() => setTimeout(setIsHoveredOver(true), 10000)}
-          onMouseLeave={() => setTimeout(setIsHoveredOver(false), 10000)}
+          onMouseEnter={() => setIsHoveredOver(true)}
+          onMouseLeave={() => { setIsHoveredOver(false); setShowColorPicker(false) }}
           display="flex"
           flexDirection="row"
           justifyContent="space-between"
@@ -257,38 +294,36 @@ const ControlPanelTreeItem = (props) => {
                   <IconButton onClick={(event) => changeVisibility(event, nodeId)}>
                     { visibility ? <Visibility style={{ marginRight: '0.5rem' }} /> : <VisibilityOff style={{ marginRight: '0.5rem' }} /> }
                   </IconButton>
-                  <IconButton onClick={(event) => {
-                    event.stopPropagation();
-                    event.preventDefault();
-                    setShowColorPicker(true);
-                  }}
-                  >
-                    <ColorLensIcon className={showColorPicker ? classes.activeColorPicker : ''} />
+                  <IconButton disabled={disableRandom} onClick={(event) => handleColorChange(event, nodeId, randomColor)}>
+                      <RandomColorLensIcon style={{ marginRight: '0.5rem' }} />
                   </IconButton>
-                  <IconButton disabled={disableRandom} onClick={(event) => generateRandomColor(event, nodeId)}>
-                    <RandomColorLensIcon />
-                  </IconButton>
-                  {
-              showColorPicker
+                </>
+              )
+              : null}
+              <IconButton onClick={(event) => {
+                event.stopPropagation();
+                event.preventDefault();
+                setShowColorPicker(true)
+              }}>
+                <SquareIcon fillColor={getColor(nodeId).hex}/>
+
+              </IconButton>
+                {showColorPicker && isHoveredOver
                 ? (
                   <Box
                     className={classes.colorPickerBox}
-                    onMouseLeave={() => setTimeout(setShowColorPicker(false), 30000)}
+                    onMouseLeave={() => setShowColorPicker(false)}
                   >
-                    {/* <TriangleIcon className={classes.triangleIcon} /> */}
                     <ChromePicker
                       className={classes.colorPicker}
-                      color={color}
+                      color={getColor(nodeId).hex}
                       onChangeComplete={(color, event) => {
-                        handleColorSelection(color, event, nodeId);
+                        handleColorChange(event, nodeId, () => {return {...color.rgb, hex: color.hex}});
                       }}
                     />
                   </Box>
                 ) : null
-            }
-                </>
-              )
-              : null}
+                }
           </Grid>
         </Grid>
       )}

webapp/components/general/NetPyNEIcons.js

@@ -91,3 +91,12 @@ export function TreeItemLineWithRadiusIcon (props) {
     </SvgIcon>
   );
 }
+
+
+export function SquareIcon (props) {
+  return (
+    <SvgIcon viewBox="0 0 24 24" {...props}>
+      <rect width="20" height="20" fill={props.fillColor ? props.fillColor : "#FF7F99"} rx="5" />
+    </SvgIcon>
+  );
+}