aboutsummaryrefslogtreecommitdiff
path: root/src/Utils.ts
diff options
context:
space:
mode:
Diffstat (limited to 'src/Utils.ts')
-rw-r--r--src/Utils.ts48
1 files changed, 8 insertions, 40 deletions
diff --git a/src/Utils.ts b/src/Utils.ts
index de3b13f63..8054245f5 100644
--- a/src/Utils.ts
+++ b/src/Utils.ts
@@ -3,6 +3,8 @@ import v5 = require("uuid/v5");
import { ColorState } from 'react-color';
import { Socket } from 'socket.io';
import { Message } from './server/Message';
+import { Colors } from './client/views/global/globalEnums';
+import Color = require('color');
export namespace Utils {
export let DRAG_THRESHOLD = 4;
@@ -574,46 +576,12 @@ export function simulateMouseClick(element: Element | null | undefined, x: numbe
}
export function lightOrDark(color: any) {
-
- // Variables for red, green, blue values
- var r, g, b, hsp;
-
- // Check the format of the color, HEX or RGB?
- if (color.match(/^rgb/)) {
-
- // If RGB --> store the red, green, blue values in separate variables
- color = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);
-
- r = color[1];
- g = color[2];
- b = color[3];
- }
- else {
-
- // If hex --> Convert it to RGB: http://gist.github.com/983661
- color = +("0x" + color.slice(1).replace(
- color.length < 5 && /./g, '$&$&'));
-
- r = color >> 16;
- g = color >> 8 & 255;
- b = color & 255;
- }
-
- // HSP (Highly Sensitive Poo) equation from http://alienryderflex.com/hsp.html
- hsp = Math.sqrt(
- 0.299 * (r * r) +
- 0.587 * (g * g) +
- 0.114 * (b * b)
- );
-
- // Using the HSP value, determine whether the color is light or dark
- if (hsp > 127.5) {
- return 'light';
- }
- else {
-
- return 'dark';
- }
+ const nonAlphaColor = color.startsWith("#") ? (color as string).substring(0, 7) :
+ color.startsWith("rgba") ? color.replace(/,.[^,]*\)/, ")").replace("rgba", "rgb") : color;
+ const col = Color(nonAlphaColor).rgb();
+ const colsum = (col.red() + col.green() + col.blue());
+ if (colsum / col.alpha() > 400 || col.alpha() < 0.25) return Colors.DARK_GRAY;
+ else return Colors.WHITE;
}