Merge pull request #78 from sc420/77-make-node-handle-bigger-and-sele…

…ction-colors-more-vivid 77 make node handle bigger and selection colors more vivid
sc420 · Apr 6, 2024 · 8f87e05 · 8f87e05
2 parents fda5b47 + edc91e1
commit 8f87e05
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 10 deletions.
diff --git a/interactive-computational-graph/public/get_started.gif b/interactive-computational-graph/public/get_started.gif
diff --git a/interactive-computational-graph/src/reactflow/CustomNode.tsx b/interactive-computational-graph/src/reactflow/CustomNode.tsx
@@ -48,30 +48,34 @@ const CustomNode: FunctionComponent<CustomNodeProps> = ({
  return data.isDarkMode ? grey[800] : theme.palette.background.default;
  }, [data.isDarkMode, theme.palette.background.default]);
 
+ const getBorder = useCallback((): number => {
+ return selected ? 2 : 1;
+ }, [selected]);
+
  const getBorderColor = useCallback((): string => {
  const colorTheme = getColorTheme();
  if (data.isDarkMode) {
- return selected ? colorTheme[200] : colorTheme[800];
+ return selected ? colorTheme[100] : colorTheme[800];
  } else {
- return selected ? colorTheme[800] : colorTheme[200];
+ return selected ? colorTheme[900] : colorTheme[200];
  }
  }, [data.isDarkMode, getColorTheme, selected]);
 
  const getTitleColor = useCallback((): string => {
  const colorTheme = getColorTheme();
  if (data.isDarkMode) {
- return selected ? colorTheme[700] : colorTheme[800];
+ return selected ? colorTheme[400] : colorTheme[800];
  } else {
- return selected ? colorTheme[300] : colorTheme[200];
+ return selected ? colorTheme[400] : colorTheme[200];
  }
  }, [data.isDarkMode, getColorTheme, selected]);
 
  const getHandleHoverColor = useCallback((): string => {
  const colorTheme = getColorTheme();
  if (data.isDarkMode) {
- return selected ? colorTheme[500] : colorTheme[600];
+ return selected ? colorTheme[300] : colorTheme[600];
  } else {
- return selected ? colorTheme[200] : colorTheme[100];
+ return selected ? colorTheme[300] : colorTheme[100];
  }
  }, [data.isDarkMode, getColorTheme, selected]);
 
@@ -96,6 +100,7 @@ const CustomNode: FunctionComponent<CustomNodeProps> = ({
  // Get colors
  const darkenCoefficient = getDarkenCoefficient();
  const backgroundColor = getBackgroundColor();
+ const border = getBorder();
  const borderColor = darken(getBorderColor(), darkenCoefficient);
  const titleColor = darken(getTitleColor(), darkenCoefficient);
  const handleColor = titleColor;
@@ -107,7 +112,7 @@ const CustomNode: FunctionComponent<CustomNodeProps> = ({
  {/* Node frame */}
  <Box
  bgcolor={backgroundColor}
- border={1}
+ border={border}
  borderColor={borderColor}
  borderRadius={1}
  >

diff --git a/interactive-computational-graph/src/reactflow/InputItems.tsx b/interactive-computational-graph/src/reactflow/InputItems.tsx
@@ -77,7 +77,7 @@ const InputItems: FunctionComponent<InputItemProps> = ({
  position: "absolute", // needs position="relative" on parent
  background: handleColor,
  borderColor: handleBorderColor,
- borderRadius: "10px 0px 0px 10px",
+ borderRadius: "15px 0px 0px 15px",
  top: 20, // manual offset
  left: getInputHandleLeft(),
  width: handleSize,

diff --git a/interactive-computational-graph/src/reactflow/OutputHandle.tsx b/interactive-computational-graph/src/reactflow/OutputHandle.tsx
@@ -29,7 +29,7 @@ const OutputHandle: FunctionComponent<OutputHandleProps> = ({
  style={{
  background: handleColor,
  borderColor: handleBorderColor,
- borderRadius: "0px 10px 10px 0px",
+ borderRadius: "0px 15px 15px 0px",
  top: "50%", // centers the handle
  // adds 1 to hide the tiny gap between the node body and the handle
  right: -handleSize + 1,

diff --git a/interactive-computational-graph/src/reactflow/styles.ts b/interactive-computational-graph/src/reactflow/styles.ts
@@ -1,6 +1,6 @@
 const itemHeight = 40;
 const inputWidth = 120;
-const handleSize = 20;
+const handleSize = 25;
 const bodyPadding = 1;
 
 export { itemHeight, inputWidth, handleSize, bodyPadding };