refactored flow cells, added colors for lab (#78)

* made better flow cells

* made cubical desaturation

* made colorfull lab nodes

* colorful lab nodes for all text ones

* all lab nodes are colorful

* disabled lazy loading on heroes

* fixed color calculation hook

* fixed lab color gradients calculation

* fixed cell text on flow

src/utils/color.ts

@@ -1,13 +1,15 @@
-export const convertHexToRGBA = (hexCode, opacity) => {
-  let hex = hexCode.replace('#', '');
+import { darken, desaturate, parseToHsla } from 'color2k';
+import { DEFAULT_DOMINANT_COLOR } from '~/constants/node';
 
-  if (hex.length === 3) {
-    hex = `${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`;
+export const normalizeBrightColor = (color?: string, saturationExp = 3, lightnessExp = 3) => {
+  if (!color) {
+    return '';
   }
 
-  const r = parseInt(hex.substring(0, 2), 16);
-  const g = parseInt(hex.substring(2, 4), 16);
-  const b = parseInt(hex.substring(4, 6), 16);
+  const hsla = parseToHsla(color || DEFAULT_DOMINANT_COLOR);
+  const saturation = hsla[1];
+  const lightness = hsla[2];
 
-  return `rgba(${r},${g},${b},${opacity})`;
+  const desaturated = desaturate(color, saturation ** saturationExp);
+  return darken(desaturated, lightness ** lightnessExp);
 };

src/utils/dom.ts

@@ -76,17 +76,17 @@ export const describeArc = (
 };
 
 export const getURLFromString = (
-  url: string,
+  url?: string,
   size?: typeof PRESETS[keyof typeof PRESETS]
 ): string => {
   if (size) {
-    return url.replace(
+    return (url || '').replace(
       'REMOTE_CURRENT://',
       `${process.env.REACT_APP_REMOTE_CURRENT}cache/${size}/`
     );
   }
 
-  return url.replace('REMOTE_CURRENT://', process.env.REACT_APP_REMOTE_CURRENT);
+  return (url || '').replace('REMOTE_CURRENT://', process.env.REACT_APP_REMOTE_CURRENT);
 };
 
 export const getURL = (

src/utils/hooks/useColorFromString.ts

@@ -0,0 +1,10 @@
+import { useMemo } from 'react';
+import { normalizeBrightColor } from '~/utils/color';
+import { stringToColour } from '~/utils/dom';
+
+export const useColorFromString = (val?: string, saturation = 3, lightness = 3) => {
+  return useMemo(
+    () => (val && normalizeBrightColor(stringToColour(val), saturation, lightness)) || '',
+    []
+  );
+};

src/utils/hooks/useColorGradientFromString.ts

@@ -0,0 +1,17 @@
+import { useMemo } from 'react';
+import { adjustHue } from 'color2k';
+import { normalizeBrightColor } from '~/utils/color';
+import { stringToColour } from '~/utils/dom';
+
+export const useColorGradientFromString = (val?: string, saturation = 3, lightness = 3) =>
+  useMemo(() => {
+    if (!val) {
+      return '';
+    }
+
+    const color = normalizeBrightColor(stringToColour(val), saturation, lightness);
+    const second = normalizeBrightColor(adjustHue(color, 45), saturation, lightness);
+    const third = normalizeBrightColor(adjustHue(color, 90), saturation, lightness);
+
+    return `linear-gradient(155deg, ${color}, ${second}, ${third})`;
+  }, [val]);

src/utils/types.ts

@@ -6,3 +6,8 @@ export type DivProps = React.DetailedHTMLProps<
 >;
 
 export type SVGProps = React.SVGProps<SVGSVGElement>;
+
+export type IMGProps = React.DetailedHTMLProps<
+  React.ImgHTMLAttributes<HTMLImageElement>,
+  HTMLImageElement
+>;