smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

add titles with width/height to scale buttons in ExportDialog (#2193)

Browse source
This commit is contained in:
Andrew Aquino 2020-10-07 06:37:38 -07:00 • committed by GitHub
parent d18a72c879
commit 215128ffdf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 91 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

88
src/scene/export.ts
View file

@ -11,6 +11,7 @@ import { t } from "../i18n";
import { DEFAULT_FONT_FAMILY, DEFAULT_VERTICAL_ALIGN } from "../constants";
export const SVG_EXPORT_TAG = `<!-- svg-source:excalidraw -->`;
const WATERMARK_HEIGHT = 16;
export const exportToCanvas = (
elements: readonly NonDeletedExcalidrawElement[],
@ -35,19 +36,13 @@ export const exportToCanvas = (
return tempCanvas;
},
) => {
let sceneElements = elements;
if (shouldAddWatermark) {
const [, , maxX, maxY] = getCommonBounds(elements);
sceneElements = [...sceneElements, getWatermarkElement(maxX, maxY)];
}
const sceneElements = getElementsAndWatermark(elements, shouldAddWatermark);
// calculate smallest area to fit the contents in
const [minX, minY, maxX, maxY] = getCommonBounds(sceneElements);
const width = distance(minX, maxX) + exportPadding * 2;
const height =
distance(minY, maxY) +
exportPadding +
(shouldAddWatermark ? 0 : exportPadding);
const [minX, minY, width, height] = getCanvasSize(
sceneElements,
exportPadding,
shouldAddWatermark,
);
const tempCanvas: any = createCanvas(width, height);
@ -93,19 +88,13 @@ export const exportToSvg = (
shouldAddWatermark: boolean;
},
): SVGSVGElement => {
let sceneElements = elements;
if (shouldAddWatermark) {
const [, , maxX, maxY] = getCommonBounds(elements);
sceneElements = [...sceneElements, getWatermarkElement(maxX, maxY)];
}
const sceneElements = getElementsAndWatermark(elements, shouldAddWatermark);
// calculate canvas dimensions
const [minX, minY, maxX, maxY] = getCommonBounds(sceneElements);
const width = distance(minX, maxX) + exportPadding * 2;
const height =
distance(minY, maxY) +
exportPadding +
(shouldAddWatermark ? 0 : exportPadding);
const [minX, minY, width, height] = getCanvasSize(
sceneElements,
exportPadding,
shouldAddWatermark,
);
// initialze SVG root
const svgRoot = document.createElementNS(SVG_NS, "svg");
@ -149,15 +138,29 @@ export const exportToSvg = (
return svgRoot;
};
const getElementsAndWatermark = (
elements: readonly NonDeletedExcalidrawElement[],
shouldAddWatermark: boolean,
): readonly NonDeletedExcalidrawElement[] => {
let _elements = [...elements];
if (shouldAddWatermark) {
const [, , maxX, maxY] = getCommonBounds(elements);
_elements = [..._elements, getWatermarkElement(maxX, maxY)];
}
return _elements;
};
const getWatermarkElement = (maxX: number, maxY: number) => {
return newTextElement({
text: t("labels.madeWithExcalidraw"),
fontSize: 16,
fontSize: WATERMARK_HEIGHT,
fontFamily: DEFAULT_FONT_FAMILY,
textAlign: "right",
verticalAlign: DEFAULT_VERTICAL_ALIGN,
x: maxX,
y: maxY + 16,
y: maxY + WATERMARK_HEIGHT,
strokeColor: oc.gray[5],
backgroundColor: "transparent",
fillStyle: "hachure",
@ -168,3 +171,36 @@ const getWatermarkElement = (maxX: number, maxY: number) => {
strokeSharpness: "sharp",
});
};
// calculate smallest area to fit the contents in
const getCanvasSize = (
elements: readonly NonDeletedExcalidrawElement[],
exportPadding: number,
shouldAddWatermark: boolean,
): [number, number, number, number] => {
const [minX, minY, maxX, maxY] = getCommonBounds(elements);
const width = distance(minX, maxX) + exportPadding * 2;
const height =
distance(minY, maxY) +
exportPadding +
(shouldAddWatermark ? 0 : exportPadding);
return [minX, minY, width, height];
};
export const getExportSize = (
elements: readonly NonDeletedExcalidrawElement[],
exportPadding: number,
shouldAddWatermark: boolean,
scale: number,
): [number, number] => {
const sceneElements = getElementsAndWatermark(elements, shouldAddWatermark);
const [, , width, height] = getCanvasSize(
sceneElements,
exportPadding,
shouldAddWatermark,
).map((dimension) => Math.trunc(dimension * scale));
return [width, height];
};