foss/excalidraw
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add more redacted fonts

Browse Source
This commit is contained in:
ad1992 2021-10-28 21:59:50 +05:30
parent 4eb5ec70be
commit eff5871147
7 changed files with 112 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
public/fonts.css
View File

@ -13,7 +13,19 @@
}
@font-face {
font-family: "Redacted";
font-family: "REDACTED_REGULAR";
src: url("redacted-regular.woff2");
font-display: swap;
}
@font-face {
font-family: "REDACTED_SCRIPT_BOLD";
src: url("redacted-script-bold.woff2");
font-display: swap;
}
@font-face {
font-family: "REDACTED_SCRIPT_REGULAR";
src: url("redacted-script-regular.woff2");
font-display: swap;
}
@ -27,4 +39,5 @@
@font-face {
font-family: "Blokk";
src: url("BLOKKNeue-Regular.woff2");
font-display: swap;
}

BIN
public/redacted-regular.woff2 Normal file
View File

Binary file not shown.

BIN
public/redacted-script-bold.woff2 Normal file
View File

Binary file not shown.

91
src/actions/actionProperties.tsx
View File

@ -13,9 +13,9 @@ import {
FillCrossHatchIcon,
FillHachureIcon,
FillSolidIcon,
FontFamilyCodeIcon,
FontFamilyHandDrawnIcon,
FontFamilyNormalIcon,
// FontFamilyCodeIcon,
// FontFamilyHandDrawnIcon,
// FontFamilyNormalIcon,
FontSizeExtraLargeIcon,
FontSizeLargeIcon,
FontSizeMediumIcon,
@ -30,12 +30,11 @@ import {
TextAlignCenterIcon,
TextAlignLeftIcon,
TextAlignRightIcon,
FontFamilyWireframeIcon,
} from "../components/icons";
import {
DEFAULT_FONT_FAMILY,
DEFAULT_FONT_SIZE,
FONT_FAMILY,
//FONT_FAMILY,
} from "../constants";
import {
getNonDeletedElements,
@ -49,7 +48,7 @@ import {
ExcalidrawElement,
ExcalidrawLinearElement,
ExcalidrawTextElement,
FontFamilyValues,
//FontFamilyValues,
TextAlign,
} from "../element/types";
import { getLanguage, t } from "../i18n";
@ -63,6 +62,7 @@ import {
} from "../scene";
import { hasStrokeColor } from "../scene/comparisons";
import { register } from "./register";
import FontsList from "../components/FontList";
const changeProperty = (
elements: readonly ExcalidrawElement[],
@ -507,56 +507,43 @@ export const actionChangeFontFamily = register({
};
},
PanelComponent: ({ elements, appState, updateData }) => {
const options: {
value: FontFamilyValues;
text: string;
icon: JSX.Element;
}[] = [
{
value: FONT_FAMILY.Virgil,
text: t("labels.handDrawn"),
icon: <FontFamilyHandDrawnIcon theme={appState.theme} />,
},
{
value: FONT_FAMILY.Helvetica,
text: t("labels.normal"),
icon: <FontFamilyNormalIcon theme={appState.theme} />,
},
{
value: FONT_FAMILY.Cascadia,
text: t("labels.code"),
icon: <FontFamilyCodeIcon theme={appState.theme} />,
},
{
value: FONT_FAMILY.REDACTED,
text: t("labels.wireframe"),
icon: <FontFamilyWireframeIcon theme={appState.theme} />,
},
{
value: FONT_FAMILY.SCRIBBLE,
text: t("labels.wireframe"),
icon: <FontFamilyWireframeIcon theme={appState.theme} />,
},
{
value: FONT_FAMILY.BLOKK,
text: t("labels.wireframe"),
icon: <FontFamilyWireframeIcon theme={appState.theme} />,
},
];
// const options: {
// value: FontFamilyValues;
// text: string;
// icon: JSX.Element;
// }[] = [
// {
// value: FONT_FAMILY.Virgil,
// text: t("labels.handDrawn"),
// icon: <FontFamilyHandDrawnIcon theme={appState.theme} />,
// },
// {
// value: FONT_FAMILY.Helvetica,
// text: t("labels.normal"),
// icon: <FontFamilyNormalIcon theme={appState.theme} />,
// },
// {
// value: FONT_FAMILY.Cascadia,
// text: t("labels.code"),
// icon: <FontFamilyCodeIcon theme={appState.theme} />,
// },
// ];
return (
<fieldset>
<legend>{t("labels.fontFamily")}</legend>
<ButtonIconSelect<FontFamilyValues | false>
group="font-family"
options={options}
value={getFormValue(
elements,
appState,
(element) => isTextElement(element) && element.fontFamily,
appState.currentItemFontFamily || DEFAULT_FONT_FAMILY,
)}
onChange={(value) => updateData(value)}
<FontsList
onChange={(val) => {
updateData(val);
}}
currentFontFamily={
getFormValue(
elements,
appState,
(element) => isTextElement(element) && element.fontFamily,
appState.currentItemFontFamily || DEFAULT_FONT_FAMILY,
) || DEFAULT_FONT_FAMILY
}
/>
</fieldset>
);

53
src/components/FontList.tsx Normal file
View File

@ -0,0 +1,53 @@
import { FONT_FAMILY } from "../constants";
import { FontFamilyValues } from "../element/types";
const FontsList = ({
onChange,
currentFontFamily,
}: {
onChange: (val: FontFamilyValues) => void;
currentFontFamily: FontFamilyValues;
}) => {
return (
<select
className="dropdown-select"
onChange={(event) => {
onChange(Number(event.target.value));
}}
value={currentFontFamily}
>
<option key="virgil" value={FONT_FAMILY.Virgil}>
Hand-Drawn
</option>
<option key="helvetica" value={FONT_FAMILY.Helvetica}>
Normal
</option>
<option key="cascadia" value={FONT_FAMILY.Cascadia}>
code
</option>
<option key="redacted-regular" value={FONT_FAMILY.REDACTED_REGULAR}>
Redacted Regular
</option>
<option
key="redacted-script-regular"
value={FONT_FAMILY.REDACTED_SCRIPT_REGULAR}
>
Redacted Script
</option>
<option
key="redacted-script-bold"
value={FONT_FAMILY.REDACTED_SCRIPT_BOLD}
>
Redacted Script BOLD
</option>
<option key="Scribble" value={FONT_FAMILY.SCRIBBLE}>
Scribble
</option>
<option key="Blokk" value={FONT_FAMILY.BLOKK}>
Blokk
</option>
</select>
);
};
export default FontsList;

1
src/components/LayerUI.tsx
View File

@ -725,6 +725,7 @@ const LayerUI = ({
>
{renderCustomFooter?.(false, appState)}
</div>
<div
className={clsx(
"layer-ui__wrapper__footer-right zen-mode-transition",

8
src/constants.ts
View File

@ -68,9 +68,11 @@ export const FONT_FAMILY = {
Virgil: 1,
Helvetica: 2,
Cascadia: 3,
REDACTED: 4,
SCRIBBLE: 5,
BLOKK: 6,
REDACTED_REGULAR: 4,
REDACTED_SCRIPT_REGULAR: 5,
REDACTED_SCRIPT_BOLD: 6,
SCRIBBLE: 7,
BLOKK: 8,
};
export const THEME = {