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

feat: export background => fancy background

Browse Source
This commit is contained in:
Arnošt Pleskot 2023-08-10 17:57:07 +02:00
parent a1a31b4371
commit 31a1047c5c
No known key found for this signature in database
6 changed files with 39 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/actions/actionExport.tsx
View File

@ -12,9 +12,9 @@ import { register } from "./register";
import { CheckboxItem } from "../components/CheckboxItem";
import { getExportSize } from "../scene/export";
import {
DEFAULT_EXPORT_BACKGROUND_IMAGE,
DEFAULT_FANCY_BACKGROUND_IMAGE,
DEFAULT_EXPORT_PADDING,
EXPORT_BACKGROUND_IMAGES,
FANCY_BACKGROUND_IMAGES,
EXPORT_SCALES,
THEME,
} from "../constants";
@ -114,21 +114,21 @@ export const actionChangeExportBackground = register({
),
});
export const actionChangeExportBackgroundImage = register({
name: "changeExportBackgroundImage",
export const actionChangeFancyBackgroundImageUrl = register({
name: "changeFancyBackgroundImageUrl",
trackEvent: { category: "export", action: "toggleBackgroundImage" },
perform: (_elements, appState, value) => {
return {
appState: { ...appState, exportBackgroundImage: value },
appState: { ...appState, fancyBackgroundImageUrl: value },
commitToHistory: false,
};
},
PanelComponent: ({ updateData }) => (
<Select
items={EXPORT_BACKGROUND_IMAGES}
items={FANCY_BACKGROUND_IMAGES}
ariaLabel={t("imageExportDialog.label.backgroundImage")}
placeholder={t("imageExportDialog.label.backgroundImage")}
value={DEFAULT_EXPORT_BACKGROUND_IMAGE}
value={DEFAULT_FANCY_BACKGROUND_IMAGE}
onChange={(value) => {
updateData(value);
}}

2
src/actions/types.ts
View File

@ -124,7 +124,7 @@ export type ActionName =
| "setEmbeddableAsActiveTool"
| "createContainerFromText"
| "wrapTextInContainer"
| "changeExportBackgroundImage";
| "changeFancyBackgroundImageUrl";
export type PanelComponentProps = {
elements: readonly ExcalidrawElement[];

8
src/appState.ts
View File

@ -1,11 +1,11 @@
import { COLOR_PALETTE } from "./colors";
import {
DEFAULT_ELEMENT_PROPS,
DEFAULT_EXPORT_BACKGROUND_IMAGE,
DEFAULT_FANCY_BACKGROUND_IMAGE,
DEFAULT_FONT_FAMILY,
DEFAULT_FONT_SIZE,
DEFAULT_TEXT_ALIGN,
EXPORT_BACKGROUND_IMAGES,
FANCY_BACKGROUND_IMAGES,
EXPORT_SCALES,
THEME,
} from "./constants";
@ -102,7 +102,7 @@ export const getDefaultAppState = (): Omit<
showHyperlinkPopup: false,
selectedLinearElement: null,
fancyBackgroundImageUrl:
EXPORT_BACKGROUND_IMAGES[DEFAULT_EXPORT_BACKGROUND_IMAGE].path,
FANCY_BACKGROUND_IMAGES[DEFAULT_FANCY_BACKGROUND_IMAGE].path,
};
};
@ -210,7 +210,7 @@ const APP_STATE_STORAGE_CONF = (<
pendingImageElementId: { browser: false, export: false, server: false },
showHyperlinkPopup: { browser: false, export: false, server: false },
selectedLinearElement: { browser: true, export: false, server: false },
exportBackgroundImage: { browser: false, export: false, server: false },
fancyBackgroundImageUrl: { browser: false, export: false, server: false },
});
const _clearAppStateForStorage = <

20
src/components/ImageExportDialog.tsx
View File

@ -10,7 +10,7 @@ import {
actionChangeExportEmbedScene,
actionChangeExportScale,
actionChangeProjectName,
actionChangeExportBackgroundImage,
actionChangeFancyBackgroundImageUrl,
} from "../actions/actionExport";
import { probablySupportsClipboardBlob } from "../clipboard";
import {
@ -18,8 +18,8 @@ import {
EXPORT_IMAGE_TYPES,
isFirefox,
EXPORT_SCALES,
EXPORT_BACKGROUND_IMAGES,
DEFAULT_EXPORT_BACKGROUND_IMAGE,
FANCY_BACKGROUND_IMAGES,
DEFAULT_FANCY_BACKGROUND_IMAGE,
} from "../constants";
import { canvasToBlob } from "../data/blob";
@ -65,8 +65,8 @@ type ImageExportModalProps = {
function isBackgroundImageKey(
key: string,
): key is keyof typeof EXPORT_BACKGROUND_IMAGES {
return key in EXPORT_BACKGROUND_IMAGES;
): key is keyof typeof FANCY_BACKGROUND_IMAGES {
return key in FANCY_BACKGROUND_IMAGES;
}
const ImageExportModal = ({
@ -86,8 +86,8 @@ const ImageExportModal = ({
appState.exportBackground,
);
const [exportBackgroundImage, setExportBackgroundImage] = useState<
keyof typeof EXPORT_BACKGROUND_IMAGES
>(DEFAULT_EXPORT_BACKGROUND_IMAGE);
keyof typeof FANCY_BACKGROUND_IMAGES
>(DEFAULT_FANCY_BACKGROUND_IMAGE);
const [exportDarkMode, setExportDarkMode] = useState(
appState.exportWithDarkMode,
@ -199,7 +199,7 @@ const ImageExportModal = ({
>
{exportWithBackground && (
<Select
items={EXPORT_BACKGROUND_IMAGES}
items={FANCY_BACKGROUND_IMAGES}
ariaLabel={t("imageExportDialog.label.backgroundImage")}
placeholder={t("imageExportDialog.label.backgroundImage")}
value={exportBackgroundImage}
@ -207,9 +207,9 @@ const ImageExportModal = ({
if (isBackgroundImageKey(value)) {
setExportBackgroundImage(value);
actionManager.executeAction(
actionChangeExportBackgroundImage,
actionChangeFancyBackgroundImageUrl,
"ui",
EXPORT_BACKGROUND_IMAGES[value].path,
FANCY_BACKGROUND_IMAGES[value].path,
);
}
}}

8
src/constants.ts
View File

@ -225,8 +225,8 @@ export const MAX_DECIMALS_FOR_SVG_EXPORT = 2;
export const EXPORT_SCALES = [1, 2, 3];
export const DEFAULT_EXPORT_PADDING = 10; // px
export const EXPORT_BG_PADDING = 24; // px
export const EXPORT_BG_BORDER_RADIUS = 12; // px
export const FANCY_BG_PADDING = 24; // px
export const FANCY_BG_BORDER_RADIUS = 12; // px
export const DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT = 1440;
@ -318,7 +318,7 @@ export const DEFAULT_SIDEBAR = {
export const LIBRARY_DISABLED_TYPES = new Set(["embeddable", "image"] as const);
export const EXPORT_BACKGROUND_IMAGES = {
export const FANCY_BACKGROUND_IMAGES = {
solid: { path: null, label: "solid color" },
bubbles: { path: "/backgrounds/bubbles.svg" as DataURL, label: "bubbles" },
bubbles2: {
@ -330,5 +330,5 @@ export const EXPORT_BACKGROUND_IMAGES = {
lines2: { path: "/backgrounds/lines2.svg" as DataURL, label: "lines 2" },
} as const;
export const DEFAULT_EXPORT_BACKGROUND_IMAGE: keyof typeof EXPORT_BACKGROUND_IMAGES =
export const DEFAULT_FANCY_BACKGROUND_IMAGE: keyof typeof FANCY_BACKGROUND_IMAGES =
"solid" as const;

33
src/scene/fancyBackground.ts
View File

@ -1,4 +1,4 @@
import { EXPORT_BG_BORDER_RADIUS, EXPORT_BG_PADDING } from "../constants";
import { FANCY_BG_BORDER_RADIUS, FANCY_BG_PADDING } from "../constants";
import { loadHTMLImageElement } from "../element/image";
import { roundRect } from "../renderer/roundRect";
import { DataURL } from "../types";
@ -32,16 +32,9 @@ const addImageBackground = (
context.save();
context.beginPath();
if (context.roundRect) {
context.roundRect(0, 0, canvasWidth, canvasHeight, EXPORT_BG_BORDER_RADIUS);
context.roundRect(0, 0, canvasWidth, canvasHeight, FANCY_BG_BORDER_RADIUS);
} else {
roundRect(
context,
0,
0,
canvasWidth,
canvasHeight,
EXPORT_BG_BORDER_RADIUS,
);
roundRect(context, 0, 0, canvasWidth, canvasHeight, FANCY_BG_BORDER_RADIUS);
}
const scale = getScaleToFill(
{ w: fancyBackgroundImage.width, h: fancyBackgroundImage.height },
@ -99,20 +92,20 @@ const addContentBackground = (
if (context.roundRect) {
context.roundRect(
EXPORT_BG_PADDING,
EXPORT_BG_PADDING,
canvasWidth - EXPORT_BG_PADDING * 2,
canvasHeight - EXPORT_BG_PADDING * 2,
EXPORT_BG_BORDER_RADIUS,
FANCY_BG_PADDING,
FANCY_BG_PADDING,
canvasWidth - FANCY_BG_PADDING * 2,
canvasHeight - FANCY_BG_PADDING * 2,
FANCY_BG_BORDER_RADIUS,
);
} else {
roundRect(
context,
EXPORT_BG_PADDING,
EXPORT_BG_PADDING,
canvasWidth - EXPORT_BG_PADDING * 2,
canvasHeight - EXPORT_BG_PADDING * 2,
EXPORT_BG_BORDER_RADIUS,
FANCY_BG_PADDING,
FANCY_BG_PADDING,
canvasWidth - FANCY_BG_PADDING * 2,
canvasHeight - FANCY_BG_PADDING * 2,
FANCY_BG_BORDER_RADIUS,
);
}