sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Support different color inputs (#1478) (#1479)

Browse Source
This commit is contained in:
Warren Seine 2020-04-23 18:18:28 +02:00 committed by GitHub
parent fc802c758f
commit fa8354e306
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/ColorPicker.tsx
View File

@ -7,6 +7,17 @@ import { t, getLanguage } from "../i18n";
import { isWritableElement } from "../utils"; import { isWritableElement } from "../utils";
import colors from "../colors"; import colors from "../colors";
const standardizeColor = (
value: string,
canvasContext: CanvasRenderingContext2D,
): string | null => {
const defaultHexColor = "#000000";
canvasContext.fillStyle = value;
const hexColor = canvasContext.fillStyle;
canvasContext.fillStyle = defaultHexColor;
return hexColor !== defaultHexColor || value === "black" ? hexColor : null;
};
// This is a narrow reimplementation of the awesome react-color Twitter component // This is a narrow reimplementation of the awesome react-color Twitter component
// https://github.com/casesandberg/react-color/blob/master/src/components/twitter/Twitter.js // https://github.com/casesandberg/react-color/blob/master/src/components/twitter/Twitter.js
@ -182,6 +193,9 @@ const ColorInput = React.forwardRef(
const colorRegex = /^([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8}|transparent)$/; const colorRegex = /^([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8}|transparent)$/;
const [innerValue, setInnerValue] = React.useState(color); const [innerValue, setInnerValue] = React.useState(color);
const inputRef = React.useRef(null); const inputRef = React.useRef(null);
const canvasContext = React.useRef<CanvasRenderingContext2D>(
document.createElement("canvas").getContext("2d"),
);
React.useEffect(() => { React.useEffect(() => {
setInnerValue(color); setInnerValue(color);
@ -200,6 +214,11 @@ const ColorInput = React.forwardRef(
const value = event.target.value.toLowerCase(); const value = event.target.value.toLowerCase();
if (value.match(colorRegex)) { if (value.match(colorRegex)) {
onChange(value === "transparent" ? "transparent" : `#${value}`); onChange(value === "transparent" ? "transparent" : `#${value}`);
} else if (canvasContext.current) {
const hexColor = standardizeColor(value, canvasContext.current);
if (hexColor) {
onChange(hexColor);
}
} }
setInnerValue(value); setInnerValue(value);
}} }}