Refactor (#862)
* Initial factoring out of parts of the LayerUI component 2360 → 2224 LOC * Create a Section component * Break up src/index.tsx * Refactor actions to reduce duplication, fix CSS Also consolidate icons * Move scene/data.ts to its own directory * Fix accidental reverts, banish further single-character variables * ACTIVE_ELEM_COLOR → ACTIVE_ELEMENT_COLOR * Further refactoring the icons file * Log all errors * Pointer Event polyfill to make the tests work * add test hooks & fix tests Co-authored-by: dwelle <luzar.david@gmail.com>pull/873/head
Jed Fox
5 years ago
committed by
GitHub
parent
1a6431a04a
commit
c6a0cfc2b1
@ -0,0 +1,8 @@
|
||||
import { Action } from "./types";
|
||||
|
||||
export let actions: readonly Action[] = [];
|
||||
|
||||
export function register(action: Action): Action {
|
||||
actions = actions.concat(action);
|
||||
return action;
|
||||
}
|
||||
@ -0,0 +1,125 @@
|
||||
import React from "react";
|
||||
import { ExcalidrawElement } from "../element/types";
|
||||
import { ActionManager } from "../actions/manager";
|
||||
import { hasBackground, hasStroke, hasText, clearSelection } from "../scene";
|
||||
import { t } from "../i18n";
|
||||
import { SHAPES } from "../shapes";
|
||||
import { ToolButton } from "./ToolButton";
|
||||
import { capitalizeString } from "../utils";
|
||||
import { CURSOR_TYPE } from "../constants";
|
||||
import Stack from "./Stack";
|
||||
|
||||
export function SelectedShapeActions({
|
||||
targetElements,
|
||||
renderAction,
|
||||
elementType,
|
||||
}: {
|
||||
targetElements: readonly ExcalidrawElement[];
|
||||
renderAction: ActionManager["renderAction"];
|
||||
elementType: ExcalidrawElement["type"];
|
||||
}) {
|
||||
return (
|
||||
<div className="panelColumn">
|
||||
{renderAction("changeStrokeColor")}
|
||||
{(hasBackground(elementType) ||
|
||||
targetElements.some(element => hasBackground(element.type))) && (
|
||||
<>
|
||||
{renderAction("changeBackgroundColor")}
|
||||
|
||||
{renderAction("changeFillStyle")}
|
||||
</>
|
||||
)}
|
||||
|
||||
{(hasStroke(elementType) ||
|
||||
targetElements.some(element => hasStroke(element.type))) && (
|
||||
<>
|
||||
{renderAction("changeStrokeWidth")}
|
||||
|
||||
{renderAction("changeSloppiness")}
|
||||
</>
|
||||
)}
|
||||
|
||||
{(hasText(elementType) ||
|
||||
targetElements.some(element => hasText(element.type))) && (
|
||||
<>
|
||||
{renderAction("changeFontSize")}
|
||||
|
||||
{renderAction("changeFontFamily")}
|
||||
</>
|
||||
)}
|
||||
|
||||
{renderAction("changeOpacity")}
|
||||
|
||||
<fieldset>
|
||||
<legend>{t("labels.layers")}</legend>
|
||||
<div className="buttonList">
|
||||
{renderAction("sendToBack")}
|
||||
{renderAction("sendBackward")}
|
||||
{renderAction("bringToFront")}
|
||||
{renderAction("bringForward")}
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ShapesSwitcher({
|
||||
elementType,
|
||||
setAppState,
|
||||
setElements,
|
||||
elements,
|
||||
}: {
|
||||
elementType: ExcalidrawElement["type"];
|
||||
setAppState: any;
|
||||
setElements: any;
|
||||
elements: readonly ExcalidrawElement[];
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
{SHAPES.map(({ value, icon }, index) => {
|
||||
const label = t(`toolBar.${value}`);
|
||||
return (
|
||||
<ToolButton
|
||||
key={value}
|
||||
type="radio"
|
||||
icon={icon}
|
||||
checked={elementType === value}
|
||||
name="editor-current-shape"
|
||||
title={`${capitalizeString(label)} — ${
|
||||
capitalizeString(value)[0]
|
||||
}, ${index + 1}`}
|
||||
keyBindingLabel={`${index + 1}`}
|
||||
aria-label={capitalizeString(label)}
|
||||
aria-keyshortcuts={`${label[0]} ${index + 1}`}
|
||||
onChange={() => {
|
||||
setAppState({ elementType: value, multiElement: null });
|
||||
setElements(clearSelection(elements));
|
||||
document.documentElement.style.cursor =
|
||||
value === "text" ? CURSOR_TYPE.TEXT : CURSOR_TYPE.CROSSHAIR;
|
||||
setAppState({});
|
||||
}}
|
||||
></ToolButton>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function ZoomActions({
|
||||
renderAction,
|
||||
zoom,
|
||||
}: {
|
||||
renderAction: ActionManager["renderAction"];
|
||||
zoom: number;
|
||||
}) {
|
||||
return (
|
||||
<Stack.Col gap={1}>
|
||||
<Stack.Row gap={1} align="center">
|
||||
{renderAction("zoomIn")}
|
||||
{renderAction("zoomOut")}
|
||||
{renderAction("resetZoom")}
|
||||
<div style={{ marginLeft: 4 }}>{(zoom * 100).toFixed(0)}%</div>
|
||||
</Stack.Row>
|
||||
</Stack.Col>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,233 @@
|
||||
import React from "react";
|
||||
import { showSelectedShapeActions } from "../element";
|
||||
import { calculateScrollCenter, getTargetElement } from "../scene";
|
||||
import { exportCanvas } from "../data";
|
||||
|
||||
import { AppState } from "../types";
|
||||
import { ExcalidrawElement } from "../element/types";
|
||||
|
||||
import { ActionManager } from "../actions/manager";
|
||||
import { Island } from "./Island";
|
||||
import Stack from "./Stack";
|
||||
import { FixedSideContainer } from "./FixedSideContainer";
|
||||
import { LockIcon } from "./LockIcon";
|
||||
import { ExportDialog, ExportCB } from "./ExportDialog";
|
||||
import { LanguageList } from "./LanguageList";
|
||||
import { t, languages, setLanguage } from "../i18n";
|
||||
import { HintViewer } from "./HintViewer";
|
||||
import useIsMobile from "../is-mobile";
|
||||
|
||||
import { ExportType } from "../scene/types";
|
||||
import { MobileMenu } from "./MobileMenu";
|
||||
import { ZoomActions, SelectedShapeActions, ShapesSwitcher } from "./Actions";
|
||||
import { Section } from "./Section";
|
||||
|
||||
interface LayerUIProps {
|
||||
actionManager: ActionManager;
|
||||
appState: AppState;
|
||||
canvas: HTMLCanvasElement | null;
|
||||
setAppState: any;
|
||||
elements: readonly ExcalidrawElement[];
|
||||
language: string;
|
||||
setElements: (elements: readonly ExcalidrawElement[]) => void;
|
||||
}
|
||||
|
||||
export const LayerUI = React.memo(
|
||||
({
|
||||
actionManager,
|
||||
appState,
|
||||
setAppState,
|
||||
canvas,
|
||||
elements,
|
||||
language,
|
||||
setElements,
|
||||
}: LayerUIProps) => {
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
function renderExportDialog() {
|
||||
const createExporter = (type: ExportType): ExportCB => (
|
||||
exportedElements,
|
||||
scale,
|
||||
) => {
|
||||
if (canvas) {
|
||||
exportCanvas(type, exportedElements, canvas, {
|
||||
exportBackground: appState.exportBackground,
|
||||
name: appState.name,
|
||||
viewBackgroundColor: appState.viewBackgroundColor,
|
||||
scale,
|
||||
});
|
||||
}
|
||||
};
|
||||
return (
|
||||
<ExportDialog
|
||||
elements={elements}
|
||||
appState={appState}
|
||||
actionManager={actionManager}
|
||||
onExportToPng={createExporter("png")}
|
||||
onExportToSvg={createExporter("svg")}
|
||||
onExportToClipboard={createExporter("clipboard")}
|
||||
onExportToBackend={exportedElements => {
|
||||
if (canvas) {
|
||||
exportCanvas(
|
||||
"backend",
|
||||
exportedElements.map(element => ({
|
||||
...element,
|
||||
isSelected: false,
|
||||
})),
|
||||
canvas,
|
||||
appState,
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return isMobile ? (
|
||||
<MobileMenu
|
||||
appState={appState}
|
||||
elements={elements}
|
||||
setElements={setElements}
|
||||
actionManager={actionManager}
|
||||
exportButton={renderExportDialog()}
|
||||
setAppState={setAppState}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<FixedSideContainer side="top">
|
||||
<HintViewer
|
||||
elementType={appState.elementType}
|
||||
multiMode={appState.multiElement !== null}
|
||||
isResizing={appState.isResizing}
|
||||
elements={elements}
|
||||
/>
|
||||
<div className="App-menu App-menu_top">
|
||||
<Stack.Col gap={4} align="end">
|
||||
<Section className="App-right-menu" heading="canvasActions">
|
||||
<Island padding={4}>
|
||||
<Stack.Col gap={4}>
|
||||
<Stack.Row justifyContent={"space-between"}>
|
||||
{actionManager.renderAction("loadScene")}
|
||||
{actionManager.renderAction("saveScene")}
|
||||
{renderExportDialog()}
|
||||
{actionManager.renderAction("clearCanvas")}
|
||||
</Stack.Row>
|
||||
{actionManager.renderAction("changeViewBackgroundColor")}
|
||||
</Stack.Col>
|
||||
</Island>
|
||||
</Section>
|
||||
{showSelectedShapeActions(appState, elements) && (
|
||||
<Section
|
||||
className="App-right-menu"
|
||||
heading="selectedShapeActions"
|
||||
>
|
||||
<Island padding={4}>
|
||||
<SelectedShapeActions
|
||||
targetElements={getTargetElement(
|
||||
appState.editingElement,
|
||||
elements,
|
||||
)}
|
||||
renderAction={actionManager.renderAction}
|
||||
elementType={appState.elementType}
|
||||
/>
|
||||
</Island>
|
||||
</Section>
|
||||
)}
|
||||
</Stack.Col>
|
||||
<Section heading="shapes">
|
||||
{heading => (
|
||||
<Stack.Col gap={4} align="start">
|
||||
<Stack.Row gap={1}>
|
||||
<Island padding={1}>
|
||||
{heading}
|
||||
<Stack.Row gap={1}>
|
||||
<ShapesSwitcher
|
||||
elementType={appState.elementType}
|
||||
setAppState={setAppState}
|
||||
setElements={setElements}
|
||||
elements={elements}
|
||||
/>
|
||||
</Stack.Row>
|
||||
</Island>
|
||||
<LockIcon
|
||||
checked={appState.elementLocked}
|
||||
onChange={() => {
|
||||
setAppState({
|
||||
elementLocked: !appState.elementLocked,
|
||||
elementType: appState.elementLocked
|
||||
? "selection"
|
||||
: appState.elementType,
|
||||
});
|
||||
}}
|
||||
title={t("toolBar.lock")}
|
||||
isButton={isMobile}
|
||||
/>
|
||||
</Stack.Row>
|
||||
</Stack.Col>
|
||||
)}
|
||||
</Section>
|
||||
<div />
|
||||
</div>
|
||||
<div className="App-menu App-menu_bottom">
|
||||
<Stack.Col gap={2}>
|
||||
<Section heading="canvasActions">
|
||||
<Island padding={1}>
|
||||
<ZoomActions
|
||||
renderAction={actionManager.renderAction}
|
||||
zoom={appState.zoom}
|
||||
/>
|
||||
</Island>
|
||||
</Section>
|
||||
</Stack.Col>
|
||||
</div>
|
||||
</FixedSideContainer>
|
||||
<footer role="contentinfo">
|
||||
<LanguageList
|
||||
onChange={lng => {
|
||||
setLanguage(lng);
|
||||
setAppState({});
|
||||
}}
|
||||
languages={languages}
|
||||
currentLanguage={language}
|
||||
floating
|
||||
/>
|
||||
{appState.scrolledOutside && (
|
||||
<button
|
||||
className="scroll-back-to-content"
|
||||
onClick={() => {
|
||||
setAppState({ ...calculateScrollCenter(elements) });
|
||||
}}
|
||||
>
|
||||
{t("buttons.scrollBackToContent")}
|
||||
</button>
|
||||
)}
|
||||
</footer>
|
||||
</>
|
||||
);
|
||||
},
|
||||
(prev, next) => {
|
||||
const getNecessaryObj = (appState: AppState): Partial<AppState> => {
|
||||
const {
|
||||
draggingElement,
|
||||
resizingElement,
|
||||
multiElement,
|
||||
editingElement,
|
||||
isResizing,
|
||||
cursorX,
|
||||
cursorY,
|
||||
...ret
|
||||
} = appState;
|
||||
return ret;
|
||||
};
|
||||
const prevAppState = getNecessaryObj(prev.appState);
|
||||
const nextAppState = getNecessaryObj(next.appState);
|
||||
|
||||
const keys = Object.keys(prevAppState) as (keyof Partial<AppState>)[];
|
||||
|
||||
return (
|
||||
prev.language === next.language &&
|
||||
prev.elements === next.elements &&
|
||||
keys.every(key => prevAppState[key] === nextAppState[key])
|
||||
);
|
||||
},
|
||||
);
|
||||
@ -0,0 +1,120 @@
|
||||
import React from "react";
|
||||
import { AppState } from "../types";
|
||||
import { ActionManager } from "../actions/manager";
|
||||
import { t, setLanguage } from "../i18n";
|
||||
import Stack from "./Stack";
|
||||
import { LanguageList } from "./LanguageList";
|
||||
import { showSelectedShapeActions } from "../element";
|
||||
import { ExcalidrawElement } from "../element/types";
|
||||
import { FixedSideContainer } from "./FixedSideContainer";
|
||||
import { Island } from "./Island";
|
||||
import { HintViewer } from "./HintViewer";
|
||||
import { calculateScrollCenter, getTargetElement } from "../scene";
|
||||
import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
|
||||
import { Section } from "./Section";
|
||||
|
||||
type MobileMenuProps = {
|
||||
appState: AppState;
|
||||
actionManager: ActionManager;
|
||||
exportButton: React.ReactNode;
|
||||
setAppState: any;
|
||||
elements: readonly ExcalidrawElement[];
|
||||
setElements: any;
|
||||
};
|
||||
|
||||
export function MobileMenu({
|
||||
appState,
|
||||
elements,
|
||||
setElements,
|
||||
actionManager,
|
||||
exportButton,
|
||||
setAppState,
|
||||
}: MobileMenuProps) {
|
||||
return (
|
||||
<>
|
||||
{appState.openMenu === "canvas" ? (
|
||||
<Section className="App-mobile-menu" heading="canvasActions">
|
||||
<div className="App-mobile-menu-scroller panelColumn">
|
||||
<Stack.Col gap={4}>
|
||||
{actionManager.renderAction("loadScene")}
|
||||
{actionManager.renderAction("saveScene")}
|
||||
{exportButton}
|
||||
{actionManager.renderAction("clearCanvas")}
|
||||
{actionManager.renderAction("changeViewBackgroundColor")}
|
||||
<fieldset>
|
||||
<legend>{t("labels.language")}</legend>
|
||||
<LanguageList
|
||||
onChange={lng => {
|
||||
setLanguage(lng);
|
||||
setAppState({});
|
||||
}}
|
||||
/>
|
||||
</fieldset>
|
||||
</Stack.Col>
|
||||
</div>
|
||||
</Section>
|
||||
) : appState.openMenu === "shape" &&
|
||||
showSelectedShapeActions(appState, elements) ? (
|
||||
<Section className="App-mobile-menu" heading="selectedShapeActions">
|
||||
<div className="App-mobile-menu-scroller">
|
||||
<SelectedShapeActions
|
||||
targetElements={getTargetElement(
|
||||
appState.editingElement,
|
||||
elements,
|
||||
)}
|
||||
renderAction={actionManager.renderAction}
|
||||
elementType={appState.elementType}
|
||||
/>
|
||||
</div>
|
||||
</Section>
|
||||
) : null}
|
||||
<FixedSideContainer side="top">
|
||||
<Section heading="shapes">
|
||||
{heading => (
|
||||
<Stack.Col gap={4} align="center">
|
||||
<Stack.Row gap={1}>
|
||||
<Island padding={1}>
|
||||
{heading}
|
||||
<Stack.Row gap={1}>
|
||||
<ShapesSwitcher
|
||||
elementType={appState.elementType}
|
||||
setAppState={setAppState}
|
||||
setElements={setElements}
|
||||
elements={elements}
|
||||
/>
|
||||
</Stack.Row>
|
||||
</Island>
|
||||
</Stack.Row>
|
||||
</Stack.Col>
|
||||
)}
|
||||
</Section>
|
||||
<HintViewer
|
||||
elementType={appState.elementType}
|
||||
multiMode={appState.multiElement !== null}
|
||||
isResizing={appState.isResizing}
|
||||
elements={elements}
|
||||
/>
|
||||
</FixedSideContainer>
|
||||
<footer className="App-toolbar">
|
||||
<div className="App-toolbar-content">
|
||||
{actionManager.renderAction("toggleCanvasMenu")}
|
||||
{actionManager.renderAction("toggleEditMenu")}
|
||||
{actionManager.renderAction("undo")}
|
||||
{actionManager.renderAction("redo")}
|
||||
{actionManager.renderAction("finalize")}
|
||||
{actionManager.renderAction("deleteSelectedElements")}
|
||||
</div>
|
||||
{appState.scrolledOutside && (
|
||||
<button
|
||||
className="scroll-back-to-content"
|
||||
onClick={() => {
|
||||
setAppState({ ...calculateScrollCenter(elements) });
|
||||
}}
|
||||
>
|
||||
{t("buttons.scrollBackToContent")}
|
||||
</button>
|
||||
)}
|
||||
</footer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
import React from "react";
|
||||
import { t } from "../i18n";
|
||||
|
||||
interface SectionProps extends React.HTMLProps<HTMLElement> {
|
||||
heading: string;
|
||||
children: React.ReactNode | ((header: React.ReactNode) => React.ReactNode);
|
||||
}
|
||||
|
||||
export function Section({ heading, children, ...props }: SectionProps) {
|
||||
const header = (
|
||||
<h2 className="visually-hidden" id={`${heading}-title`}>
|
||||
{t(`headings.${heading}`)}
|
||||
</h2>
|
||||
);
|
||||
return (
|
||||
<section {...props} aria-labelledby={`${heading}-title`}>
|
||||
{typeof children === "function" ? (
|
||||
children(header)
|
||||
) : (
|
||||
<>
|
||||
{header}
|
||||
{children}
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,152 @@
|
||||
import React from "react";
|
||||
|
||||
interface TopErrorBoundaryState {
|
||||
unresolvedError: Error[] | null;
|
||||
hasError: boolean;
|
||||
stack: string;
|
||||
localStorage: string;
|
||||
}
|
||||
|
||||
export class TopErrorBoundary extends React.Component<
|
||||
any,
|
||||
TopErrorBoundaryState
|
||||
> {
|
||||
state: TopErrorBoundaryState = {
|
||||
unresolvedError: null,
|
||||
hasError: false,
|
||||
stack: "",
|
||||
localStorage: "",
|
||||
};
|
||||
|
||||
componentDidCatch(error: Error) {
|
||||
const _localStorage: any = {};
|
||||
for (const [key, value] of Object.entries({ ...localStorage })) {
|
||||
try {
|
||||
_localStorage[key] = JSON.parse(value);
|
||||
} catch {
|
||||
_localStorage[key] = value;
|
||||
}
|
||||
}
|
||||
this.setState(state => ({
|
||||
hasError: true,
|
||||
unresolvedError: state.unresolvedError
|
||||
? state.unresolvedError.concat(error)
|
||||
: [error],
|
||||
localStorage: JSON.stringify(_localStorage),
|
||||
}));
|
||||
}
|
||||
|
||||
async componentDidUpdate() {
|
||||
if (this.state.unresolvedError !== null) {
|
||||
let stack = "";
|
||||
for (const error of this.state.unresolvedError) {
|
||||
if (stack) {
|
||||
stack += `\n\n================\n\n`;
|
||||
}
|
||||
stack += `${error.message}:\n\n`;
|
||||
try {
|
||||
const StackTrace = await import("stacktrace-js");
|
||||
stack += (await StackTrace.fromError(error)).join("\n");
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
stack += error.stack || "";
|
||||
}
|
||||
}
|
||||
|
||||
this.setState(state => ({
|
||||
unresolvedError: null,
|
||||
stack: `${
|
||||
state.stack ? `${state.stack}\n\n================\n\n${stack}` : stack
|
||||
}`,
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
private selectTextArea(event: React.MouseEvent<HTMLTextAreaElement>) {
|
||||
if (event.target !== document.activeElement) {
|
||||
event.preventDefault();
|
||||
(event.target as HTMLTextAreaElement).select();
|
||||
}
|
||||
}
|
||||
|
||||
private async createGithubIssue() {
|
||||
let body = "";
|
||||
try {
|
||||
const templateStr = (await import("../bug-issue-template")).default;
|
||||
if (typeof templateStr === "string") {
|
||||
body = encodeURIComponent(templateStr);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
|
||||
window.open(
|
||||
`https://github.com/excalidraw/excalidraw/issues/new?body=${body}`,
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.state.hasError) {
|
||||
return (
|
||||
<div className="ErrorSplash">
|
||||
<div className="ErrorSplash-messageContainer">
|
||||
<div className="ErrorSplash-paragraph bigger">
|
||||
Encountered an error. Please{" "}
|
||||
<button onClick={() => window.location.reload()}>
|
||||
reload the page
|
||||
</button>
|
||||
.
|
||||
</div>
|
||||
<div className="ErrorSplash-paragraph">
|
||||
If reloading doesn't work. Try{" "}
|
||||
<button
|
||||
onClick={() => {
|
||||
localStorage.clear();
|
||||
window.location.reload();
|
||||
}}
|
||||
>
|
||||
clearing the canvas
|
||||
</button>
|
||||
.<br />
|
||||
<div className="smaller">
|
||||
(This will unfortunately result in loss of work.)
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="ErrorSplash-paragraph">
|
||||
Before doing so, we'd appreciate if you opened an issue on our{" "}
|
||||
<button onClick={this.createGithubIssue}>bug tracker</button>.
|
||||
Please include the following error stack trace & localStorage
|
||||
content (provided it's not private):
|
||||
</div>
|
||||
<div className="ErrorSplash-paragraph">
|
||||
<div className="ErrorSplash-details">
|
||||
<label>Error stack trace:</label>
|
||||
<textarea
|
||||
rows={10}
|
||||
onPointerDown={this.selectTextArea}
|
||||
readOnly={true}
|
||||
value={
|
||||
this.state.unresolvedError
|
||||
? "Loading data. please wait..."
|
||||
: this.state.stack
|
||||
}
|
||||
/>
|
||||
<label>LocalStorage content:</label>
|
||||
<textarea
|
||||
rows={5}
|
||||
onPointerDown={this.selectTextArea}
|
||||
readOnly={true}
|
||||
value={this.state.localStorage}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
export const DRAGGING_THRESHOLD = 10; // 10px
|
||||
export const ELEMENT_SHIFT_TRANSLATE_AMOUNT = 5;
|
||||
export const ELEMENT_TRANSLATE_AMOUNT = 1;
|
||||
export const TEXT_TO_CENTER_SNAP_THRESHOLD = 30;
|
||||
export const CURSOR_TYPE = {
|
||||
TEXT: "text",
|
||||
CROSSHAIR: "crosshair",
|
||||
GRABBING: "grabbing",
|
||||
};
|
||||
export const POINTER_BUTTON = {
|
||||
MAIN: 0,
|
||||
WHEEL: 1,
|
||||
SECONDARY: 2,
|
||||
TOUCH: -1,
|
||||
};
|
||||
@ -0,0 +1,47 @@
|
||||
import { getDefaultAppState } from "../appState";
|
||||
import { DataState } from "./types";
|
||||
import { restore } from "./restore";
|
||||
|
||||
export async function loadFromBlob(blob: any) {
|
||||
const updateAppState = (contents: string) => {
|
||||
const defaultAppState = getDefaultAppState();
|
||||
let elements = [];
|
||||
let appState = defaultAppState;
|
||||
try {
|
||||
const data = JSON.parse(contents);
|
||||
if (data.type !== "excalidraw") {
|
||||
throw new Error("Cannot load invalid json");
|
||||
}
|
||||
elements = data.elements || [];
|
||||
appState = { ...defaultAppState, ...data.appState };
|
||||
} catch {
|
||||
// Do nothing because elements array is already empty
|
||||
}
|
||||
return { elements, appState };
|
||||
};
|
||||
|
||||
if (blob.handle) {
|
||||
(window as any).handle = blob.handle;
|
||||
}
|
||||
let contents;
|
||||
if ("text" in Blob) {
|
||||
contents = await blob.text();
|
||||
} else {
|
||||
contents = await new Promise(resolve => {
|
||||
const reader = new FileReader();
|
||||
reader.readAsText(blob, "utf8");
|
||||
reader.onloadend = () => {
|
||||
if (reader.readyState === FileReader.DONE) {
|
||||
resolve(reader.result as string);
|
||||
}
|
||||
};
|
||||
});
|
||||
}
|
||||
const { elements, appState } = updateAppState(contents);
|
||||
if (!elements.length) {
|
||||
return Promise.reject("Cannot load invalid json");
|
||||
}
|
||||
return new Promise<DataState>(resolve => {
|
||||
resolve(restore(elements, appState, { scrollToContent: true }));
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,239 @@
|
||||
import { ExcalidrawElement } from "../element/types";
|
||||
|
||||
import { getDefaultAppState } from "../appState";
|
||||
|
||||
import { AppState } from "../types";
|
||||
import { exportToCanvas, exportToSvg } from "../scene/export";
|
||||
import { fileSave } from "browser-nativefs";
|
||||
|
||||
import { t } from "../i18n";
|
||||
import { copyCanvasToClipboardAsPng } from "../clipboard";
|
||||
import { serializeAsJSON } from "./json";
|
||||
|
||||
import { ExportType } from "../scene/types";
|
||||
import { restore } from "./restore";
|
||||
import { restoreFromLocalStorage } from "./localStorage";
|
||||
|
||||
export { loadFromBlob } from "./blob";
|
||||
export { saveAsJSON, loadFromJSON } from "./json";
|
||||
export { saveToLocalStorage } from "./localStorage";
|
||||
|
||||
const BACKEND_GET = "https://json.excalidraw.com/api/v1/";
|
||||
|
||||
const BACKEND_V2_POST = "https://json.excalidraw.com/api/v2/post/";
|
||||
const BACKEND_V2_GET = "https://json.excalidraw.com/api/v2/";
|
||||
|
||||
// TODO: Defined globally, since file handles aren't yet serializable.
|
||||
// Once `FileSystemFileHandle` can be serialized, make this
|
||||
// part of `AppState`.
|
||||
(window as any).handle = null;
|
||||
|
||||
export async function exportToBackend(
|
||||
elements: readonly ExcalidrawElement[],
|
||||
appState: AppState,
|
||||
) {
|
||||
const json = serializeAsJSON(elements, appState);
|
||||
const encoded = new TextEncoder().encode(json);
|
||||
|
||||
const key = await window.crypto.subtle.generateKey(
|
||||
{
|
||||
name: "AES-GCM",
|
||||
length: 128,
|
||||
},
|
||||
true, // extractable
|
||||
["encrypt", "decrypt"],
|
||||
);
|
||||
// The iv is set to 0. We are never going to reuse the same key so we don't
|
||||
// need to have an iv. (I hope that's correct...)
|
||||
const iv = new Uint8Array(12);
|
||||
// We use symmetric encryption. AES-GCM is the recommended algorithm and
|
||||
// includes checks that the ciphertext has not been modified by an attacker.
|
||||
const encrypted = await window.crypto.subtle.encrypt(
|
||||
{
|
||||
name: "AES-GCM",
|
||||
iv: iv,
|
||||
},
|
||||
key,
|
||||
encoded,
|
||||
);
|
||||
// We use jwk encoding to be able to extract just the base64 encoded key.
|
||||
// We will hardcode the rest of the attributes when importing back the key.
|
||||
const exportedKey = await window.crypto.subtle.exportKey("jwk", key);
|
||||
|
||||
try {
|
||||
const response = await fetch(BACKEND_V2_POST, {
|
||||
method: "POST",
|
||||
body: encrypted,
|
||||
});
|
||||
const json = await response.json();
|
||||
if (json.id) {
|
||||
const url = new URL(window.location.href);
|
||||
// We need to store the key (and less importantly the id) as hash instead
|
||||
// of queryParam in order to never send it to the server
|
||||
url.hash = `json=${json.id},${exportedKey.k!}`;
|
||||
const urlString = url.toString();
|
||||
|
||||
window.prompt(`🔒${t("alerts.uploadedSecurly")}`, urlString);
|
||||
} else {
|
||||
window.alert(t("alerts.couldNotCreateShareableLink"));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
window.alert(t("alerts.couldNotCreateShareableLink"));
|
||||
}
|
||||
}
|
||||
|
||||
export async function importFromBackend(
|
||||
id: string | null,
|
||||
privateKey: string | undefined,
|
||||
) {
|
||||
let elements: readonly ExcalidrawElement[] = [];
|
||||
let appState: AppState = getDefaultAppState();
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
privateKey ? `${BACKEND_V2_GET}${id}` : `${BACKEND_GET}${id}.json`,
|
||||
);
|
||||
if (!response.ok) {
|
||||
window.alert(t("alerts.importBackendFailed"));
|
||||
return restore(elements, appState, { scrollToContent: true });
|
||||
}
|
||||
let data;
|
||||
if (privateKey) {
|
||||
const buffer = await response.arrayBuffer();
|
||||
const key = await window.crypto.subtle.importKey(
|
||||
"jwk",
|
||||
{
|
||||
alg: "A128GCM",
|
||||
ext: true,
|
||||
k: privateKey,
|
||||
key_ops: ["encrypt", "decrypt"],
|
||||
kty: "oct",
|
||||
},
|
||||
{
|
||||
name: "AES-GCM",
|
||||
length: 128,
|
||||
},
|
||||
false, // extractable
|
||||
["decrypt"],
|
||||
);
|
||||
const iv = new Uint8Array(12);
|
||||
const decrypted = await window.crypto.subtle.decrypt(
|
||||
{
|
||||
name: "AES-GCM",
|
||||
iv: iv,
|
||||
},
|
||||
key,
|
||||
buffer,
|
||||
);
|
||||
// We need to convert the decrypted array buffer to a string
|
||||
const string = new window.TextDecoder("utf-8").decode(
|
||||
new Uint8Array(decrypted) as any,
|
||||
);
|
||||
data = JSON.parse(string);
|
||||
} else {
|
||||
// Legacy format
|
||||
data = await response.json();
|
||||
}
|
||||
|
||||
elements = data.elements || elements;
|
||||
appState = data.appState || appState;
|
||||
} catch (error) {
|
||||
window.alert(t("alerts.importBackendFailed"));
|
||||
console.error(error);
|
||||
} finally {
|
||||
return restore(elements, appState, { scrollToContent: true });
|
||||
}
|
||||
}
|
||||
|
||||
export async function exportCanvas(
|
||||
type: ExportType,
|
||||
elements: readonly ExcalidrawElement[],
|
||||
canvas: HTMLCanvasElement,
|
||||
{
|
||||
exportBackground,
|
||||
exportPadding = 10,
|
||||
viewBackgroundColor,
|
||||
name,
|
||||
scale = 1,
|
||||
}: {
|
||||
exportBackground: boolean;
|
||||
exportPadding?: number;
|
||||
viewBackgroundColor: string;
|
||||
name: string;
|
||||
scale?: number;
|
||||
},
|
||||
) {
|
||||
if (!elements.length) {
|
||||
return window.alert(t("alerts.cannotExportEmptyCanvas"));
|
||||
}
|
||||
// calculate smallest area to fit the contents in
|
||||
|
||||
if (type === "svg") {
|
||||
const tempSvg = exportToSvg(elements, {
|
||||
exportBackground,
|
||||
viewBackgroundColor,
|
||||
exportPadding,
|
||||
});
|
||||
await fileSave(new Blob([tempSvg.outerHTML], { type: "image/svg+xml" }), {
|
||||
fileName: `${name}.svg`,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const tempCanvas = exportToCanvas(elements, {
|
||||
exportBackground,
|
||||
viewBackgroundColor,
|
||||
exportPadding,
|
||||
scale,
|
||||
});
|
||||
tempCanvas.style.display = "none";
|
||||
document.body.appendChild(tempCanvas);
|
||||
|
||||
if (type === "png") {
|
||||
const fileName = `${name}.png`;
|
||||
tempCanvas.toBlob(async (blob: any) => {
|
||||
if (blob) {
|
||||
await fileSave(blob, {
|
||||
fileName: fileName,
|
||||
});
|
||||
}
|
||||
});
|
||||
} else if (type === "clipboard") {
|
||||
try {
|
||||
copyCanvasToClipboardAsPng(tempCanvas);
|
||||
} catch {
|
||||
window.alert(t("alerts.couldNotCopyToClipboard"));
|
||||
}
|
||||
} else if (type === "backend") {
|
||||
const appState = getDefaultAppState();
|
||||
if (exportBackground) {
|
||||
appState.viewBackgroundColor = viewBackgroundColor;
|
||||
}
|
||||
exportToBackend(elements, appState);
|
||||
}
|
||||
|
||||
// clean up the DOM
|
||||
if (tempCanvas !== canvas) {
|
||||
tempCanvas.remove();
|
||||
}
|
||||
}
|
||||
|
||||
export async function loadScene(id: string | null, privateKey?: string) {
|
||||
let data;
|
||||
let selectedId;
|
||||
if (id != null) {
|
||||
// the private key is used to decrypt the content from the server, take
|
||||
// extra care not to leak it
|
||||
data = await importFromBackend(id, privateKey);
|
||||
selectedId = id;
|
||||
window.history.replaceState({}, "Excalidraw", window.location.origin);
|
||||
} else {
|
||||
data = restoreFromLocalStorage();
|
||||
}
|
||||
|
||||
return {
|
||||
elements: data.elements,
|
||||
appState: data.appState && { ...data.appState, selectedId },
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,48 @@
|
||||
import { ExcalidrawElement } from "../element/types";
|
||||
import { AppState } from "../types";
|
||||
import { cleanAppStateForExport } from "../appState";
|
||||
|
||||
import { fileOpen, fileSave } from "browser-nativefs";
|
||||
import { loadFromBlob } from "./blob";
|
||||
|
||||
export function serializeAsJSON(
|
||||
elements: readonly ExcalidrawElement[],
|
||||
appState: AppState,
|
||||
): string {
|
||||
return JSON.stringify(
|
||||
{
|
||||
type: "excalidraw",
|
||||
version: 1,
|
||||
source: window.location.origin,
|
||||
elements: elements.map(({ shape, canvas, isSelected, ...el }) => el),
|
||||
appState: cleanAppStateForExport(appState),
|
||||
},
|
||||
null,
|
||||
2,
|
||||
);
|
||||
}
|
||||
|
||||
export async function saveAsJSON(
|
||||
elements: readonly ExcalidrawElement[],
|
||||
appState: AppState,
|
||||
) {
|
||||
const serialized = serializeAsJSON(elements, appState);
|
||||
|
||||
const name = `${appState.name}.excalidraw`;
|
||||
await fileSave(
|
||||
new Blob([serialized], { type: "application/json" }),
|
||||
{
|
||||
fileName: name,
|
||||
description: "Excalidraw file",
|
||||
},
|
||||
(window as any).handle,
|
||||
);
|
||||
}
|
||||
export async function loadFromJSON() {
|
||||
const blob = await fileOpen({
|
||||
description: "Excalidraw files",
|
||||
extensions: ["json", "excalidraw"],
|
||||
mimeTypes: ["application/json"],
|
||||
});
|
||||
return loadFromBlob(blob);
|
||||
}
|
||||
@ -0,0 +1,52 @@
|
||||
import { ExcalidrawElement } from "../element/types";
|
||||
import { AppState } from "../types";
|
||||
import { clearAppStateForLocalStorage } from "../appState";
|
||||
import { restore } from "./restore";
|
||||
|
||||
const LOCAL_STORAGE_KEY = "excalidraw";
|
||||
const LOCAL_STORAGE_KEY_STATE = "excalidraw-state";
|
||||
|
||||
export function saveToLocalStorage(
|
||||
elements: readonly ExcalidrawElement[],
|
||||
appState: AppState,
|
||||
) {
|
||||
localStorage.setItem(
|
||||
LOCAL_STORAGE_KEY,
|
||||
JSON.stringify(
|
||||
elements.map(
|
||||
({ shape, canvas, ...element }: ExcalidrawElement) => element,
|
||||
),
|
||||
),
|
||||
);
|
||||
localStorage.setItem(
|
||||
LOCAL_STORAGE_KEY_STATE,
|
||||
JSON.stringify(clearAppStateForLocalStorage(appState)),
|
||||
);
|
||||
}
|
||||
|
||||
export function restoreFromLocalStorage() {
|
||||
const savedElements = localStorage.getItem(LOCAL_STORAGE_KEY);
|
||||
const savedState = localStorage.getItem(LOCAL_STORAGE_KEY_STATE);
|
||||
|
||||
let elements = [];
|
||||
if (savedElements) {
|
||||
try {
|
||||
elements = JSON.parse(savedElements).map(
|
||||
({ shape, ...element }: ExcalidrawElement) => element,
|
||||
);
|
||||
} catch {
|
||||
// Do nothing because elements array is already empty
|
||||
}
|
||||
}
|
||||
|
||||
let appState = null;
|
||||
if (savedState) {
|
||||
try {
|
||||
appState = JSON.parse(savedState) as AppState;
|
||||
} catch {
|
||||
// Do nothing because appState is already null
|
||||
}
|
||||
}
|
||||
|
||||
return restore(elements, appState);
|
||||
}
|
||||
@ -0,0 +1,75 @@
|
||||
import { Point } from "roughjs/bin/geometry";
|
||||
|
||||
import { ExcalidrawElement } from "../element/types";
|
||||
import { AppState } from "../types";
|
||||
import { DataState } from "./types";
|
||||
import { isInvisiblySmallElement, normalizeDimensions } from "../element";
|
||||
import nanoid from "nanoid";
|
||||
import { calculateScrollCenter } from "../scene";
|
||||
|
||||
export function restore(
|
||||
savedElements: readonly ExcalidrawElement[],
|
||||
savedState: AppState | null,
|
||||
opts?: { scrollToContent: boolean },
|
||||
): DataState {
|
||||
const elements = savedElements
|
||||
.filter(el => !isInvisiblySmallElement(el))
|
||||
.map(element => {
|
||||
let points: Point[] = [];
|
||||
if (element.type === "arrow") {
|
||||
if (Array.isArray(element.points)) {
|
||||
// if point array is empty, add one point to the arrow
|
||||
// this is used as fail safe to convert incoming data to a valid
|
||||
// arrow. In the new arrow, width and height are not being usde
|
||||
points = element.points.length > 0 ? element.points : [[0, 0]];
|
||||
} else {
|
||||
// convert old arrow type to a new one
|
||||
// old arrow spec used width and height
|
||||
// to determine the endpoints
|
||||
points = [
|
||||
[0, 0],
|
||||
[element.width, element.height],
|
||||
];
|
||||
}
|
||||
} else if (element.type === "line") {
|
||||
// old spec, pre-arrows
|
||||
// old spec, post-arrows
|
||||
if (!Array.isArray(element.points) || element.points.length === 0) {
|
||||
points = [
|
||||
[0, 0],
|
||||
[element.width, element.height],
|
||||
];
|
||||
} else {
|
||||
points = element.points;
|
||||
}
|
||||
} else {
|
||||
normalizeDimensions(element);
|
||||
}
|
||||
|
||||
return {
|
||||
...element,
|
||||
id: element.id || nanoid(),
|
||||
fillStyle: element.fillStyle || "hachure",
|
||||
strokeWidth: element.strokeWidth || 1,
|
||||
roughness: element.roughness || 1,
|
||||
opacity:
|
||||
element.opacity === null || element.opacity === undefined
|
||||
? 100
|
||||
: element.opacity,
|
||||
points,
|
||||
shape: null,
|
||||
canvas: null,
|
||||
canvasOffsetX: element.canvasOffsetX || 0,
|
||||
canvasOffsetY: element.canvasOffsetY || 0,
|
||||
};
|
||||
});
|
||||
|
||||
if (opts?.scrollToContent && savedState) {
|
||||
savedState = { ...savedState, ...calculateScrollCenter(elements) };
|
||||
}
|
||||
|
||||
return {
|
||||
elements: elements,
|
||||
appState: savedState,
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
import { ExcalidrawElement } from "../element/types";
|
||||
import { AppState } from "../types";
|
||||
|
||||
export interface DataState {
|
||||
type?: string;
|
||||
version?: string;
|
||||
source?: string;
|
||||
elements: readonly ExcalidrawElement[];
|
||||
appState: AppState | null;
|
||||
selectedId?: number;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,473 +0,0 @@
|
||||
import { ExcalidrawElement } from "../element/types";
|
||||
|
||||
import {
|
||||
getDefaultAppState,
|
||||
cleanAppStateForExport,
|
||||
clearAppStateForLocalStorage,
|
||||
} from "../appState";
|
||||
|
||||
import { AppState, FlooredNumber } from "../types";
|
||||
import { ExportType } from "./types";
|
||||
import { exportToCanvas, exportToSvg } from "./export";
|
||||
import nanoid from "nanoid";
|
||||
import { fileOpen, fileSave } from "browser-nativefs";
|
||||
import {
|
||||
getCommonBounds,
|
||||
normalizeDimensions,
|
||||
isInvisiblySmallElement,
|
||||
} from "../element";
|
||||
|
||||
import { Point } from "roughjs/bin/geometry";
|
||||
import { t } from "../i18n";
|
||||
import { copyCanvasToClipboardAsPng } from "../clipboard";
|
||||
|
||||
const LOCAL_STORAGE_KEY = "excalidraw";
|
||||
const LOCAL_STORAGE_KEY_STATE = "excalidraw-state";
|
||||
const BACKEND_GET = "https://json.excalidraw.com/api/v1/";
|
||||
|
||||
const BACKEND_V2_POST = "https://json.excalidraw.com/api/v2/post/";
|
||||
const BACKEND_V2_GET = "https://json.excalidraw.com/api/v2/";
|
||||
|
||||
// TODO: Defined globally, since file handles aren't yet serializable.
|
||||
// Once `FileSystemFileHandle` can be serialized, make this
|
||||
// part of `AppState`.
|
||||
(window as any).handle = null;
|
||||
|
||||
interface DataState {
|
||||
type?: string;
|
||||
version?: string;
|
||||
source?: string;
|
||||
elements: readonly ExcalidrawElement[];
|
||||
appState: AppState | null;
|
||||
selectedId?: number;
|
||||
}
|
||||
|
||||
export function serializeAsJSON(
|
||||
elements: readonly ExcalidrawElement[],
|
||||
appState: AppState,
|
||||
): string {
|
||||
return JSON.stringify(
|
||||
{
|
||||
type: "excalidraw",
|
||||
version: 1,
|
||||
source: window.location.origin,
|
||||
elements: elements.map(({ shape, canvas, isSelected, ...el }) => el),
|
||||
appState: cleanAppStateForExport(appState),
|
||||
},
|
||||
null,
|
||||
2,
|
||||
);
|
||||
}
|
||||
|
||||
export function normalizeScroll(pos: number) {
|
||||
return Math.floor(pos) as FlooredNumber;
|
||||
}
|
||||
|
||||
export function calculateScrollCenter(
|
||||
elements: readonly ExcalidrawElement[],
|
||||
): { scrollX: FlooredNumber; scrollY: FlooredNumber } {
|
||||
const [x1, y1, x2, y2] = getCommonBounds(elements);
|
||||
|
||||
const centerX = (x1 + x2) / 2;
|
||||
const centerY = (y1 + y2) / 2;
|
||||
|
||||
return {
|
||||
scrollX: normalizeScroll(window.innerWidth / 2 - centerX),
|
||||
scrollY: normalizeScroll(window.innerHeight / 2 - centerY),
|
||||
};
|
||||
}
|
||||
|
||||
export async function saveAsJSON(
|
||||
elements: readonly ExcalidrawElement[],
|
||||
appState: AppState,
|
||||
) {
|
||||
const serialized = serializeAsJSON(elements, appState);
|
||||
|
||||
const name = `${appState.name}.excalidraw`;
|
||||
await fileSave(
|
||||
new Blob([serialized], { type: "application/json" }),
|
||||
{
|
||||
fileName: name,
|
||||
description: "Excalidraw file",
|
||||
},
|
||||
(window as any).handle,
|
||||
);
|
||||
}
|
||||
export async function loadFromJSON() {
|
||||
const blob = await fileOpen({
|
||||
description: "Excalidraw files",
|
||||
extensions: ["json", "excalidraw"],
|
||||
mimeTypes: ["application/json"],
|
||||
});
|
||||
return loadFromBlob(blob);
|
||||
}
|
||||
|
||||
export async function loadFromBlob(blob: any) {
|
||||
const updateAppState = (contents: string) => {
|
||||
const defaultAppState = getDefaultAppState();
|
||||
let elements = [];
|
||||
let appState = defaultAppState;
|
||||
try {
|
||||
const data = JSON.parse(contents);
|
||||
if (data.type !== "excalidraw") {
|
||||
throw new Error("Cannot load invalid json");
|
||||
}
|
||||
elements = data.elements || [];
|
||||
appState = { ...defaultAppState, ...data.appState };
|
||||
} catch (error) {
|
||||
// Do nothing because elements array is already empty
|
||||
}
|
||||
return { elements, appState };
|
||||
};
|
||||
|
||||
if (blob.handle) {
|
||||
(window as any).handle = blob.handle;
|
||||
}
|
||||
let contents;
|
||||
if ("text" in Blob) {
|
||||
contents = await blob.text();
|
||||
} else {
|
||||
contents = await new Promise(resolve => {
|
||||
const reader = new FileReader();
|
||||
reader.readAsText(blob, "utf8");
|
||||
reader.onloadend = () => {
|
||||
if (reader.readyState === FileReader.DONE) {
|
||||
resolve(reader.result as string);
|
||||
}
|
||||
};
|
||||
});
|
||||
}
|
||||
const { elements, appState } = updateAppState(contents);
|
||||
if (!elements.length) {
|
||||
return Promise.reject("Cannot load invalid json");
|
||||
}
|
||||
return new Promise<DataState>(resolve => {
|
||||
resolve(restore(elements, appState, { scrollToContent: true }));
|
||||
});
|
||||
}
|
||||
|
||||
export async function exportToBackend(
|
||||
elements: readonly ExcalidrawElement[],
|
||||
appState: AppState,
|
||||
) {
|
||||
const json = serializeAsJSON(elements, appState);
|
||||
const encoded = new TextEncoder().encode(json);
|
||||
|
||||
const key = await window.crypto.subtle.generateKey(
|
||||
{
|
||||
name: "AES-GCM",
|
||||
length: 128,
|
||||
},
|
||||
true, // extractable
|
||||
["encrypt", "decrypt"],
|
||||
);
|
||||
// The iv is set to 0. We are never going to reuse the same key so we don't
|
||||
// need to have an iv. (I hope that's correct...)
|
||||
const iv = new Uint8Array(12);
|
||||
// We use symmetric encryption. AES-GCM is the recommended algorithm and
|
||||
// includes checks that the ciphertext has not been modified by an attacker.
|
||||
const encrypted = await window.crypto.subtle.encrypt(
|
||||
{
|
||||
name: "AES-GCM",
|
||||
iv: iv,
|
||||
},
|
||||
key,
|
||||
encoded,
|
||||
);
|
||||
// We use jwk encoding to be able to extract just the base64 encoded key.
|
||||
// We will hardcode the rest of the attributes when importing back the key.
|
||||
const exportedKey = await window.crypto.subtle.exportKey("jwk", key);
|
||||
|
||||
try {
|
||||
const response = await fetch(BACKEND_V2_POST, {
|
||||
method: "POST",
|
||||
body: encrypted,
|
||||
});
|
||||
const json = await response.json();
|
||||
if (json.id) {
|
||||
const url = new URL(window.location.href);
|
||||
// We need to store the key (and less importantly the id) as hash instead
|
||||
// of queryParam in order to never send it to the server
|
||||
url.hash = `json=${json.id},${exportedKey.k!}`;
|
||||
const urlString = url.toString();
|
||||
|
||||
window.prompt(`🔒${t("alerts.uploadedSecurly")}`, urlString);
|
||||
} else {
|
||||
window.alert(t("alerts.couldNotCreateShareableLink"));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
window.alert(t("alerts.couldNotCreateShareableLink"));
|
||||
}
|
||||
}
|
||||
|
||||
export async function importFromBackend(
|
||||
id: string | null,
|
||||
k: string | undefined,
|
||||
) {
|
||||
let elements: readonly ExcalidrawElement[] = [];
|
||||
let appState: AppState = getDefaultAppState();
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
k ? `${BACKEND_V2_GET}${id}` : `${BACKEND_GET}${id}.json`,
|
||||
);
|
||||
if (!response.ok) {
|
||||
window.alert(t("alerts.importBackendFailed"));
|
||||
return restore(elements, appState, { scrollToContent: true });
|
||||
}
|
||||
let data;
|
||||
if (k) {
|
||||
const buffer = await response.arrayBuffer();
|
||||
const key = await window.crypto.subtle.importKey(
|
||||
"jwk",
|
||||
{
|
||||
alg: "A128GCM",
|
||||
ext: true,
|
||||
k: k,
|
||||
key_ops: ["encrypt", "decrypt"],
|
||||
kty: "oct",
|
||||
},
|
||||
{
|
||||
name: "AES-GCM",
|
||||
length: 128,
|
||||
},
|
||||
false, // extractable
|
||||
["decrypt"],
|
||||
);
|
||||
const iv = new Uint8Array(12);
|
||||
const decrypted = await window.crypto.subtle.decrypt(
|
||||
{
|
||||
name: "AES-GCM",
|
||||
iv: iv,
|
||||
},
|
||||
key,
|
||||
buffer,
|
||||
);
|
||||
// We need to convert the decrypted array buffer to a string
|
||||
const string = new window.TextDecoder("utf-8").decode(
|
||||
new Uint8Array(decrypted) as any,
|
||||
);
|
||||
data = JSON.parse(string);
|
||||
} else {
|
||||
// Legacy format
|
||||
data = await response.json();
|
||||
}
|
||||
|
||||
elements = data.elements || elements;
|
||||
appState = data.appState || appState;
|
||||
} catch (error) {
|
||||
window.alert(t("alerts.importBackendFailed"));
|
||||
console.error(error);
|
||||
} finally {
|
||||
return restore(elements, appState, { scrollToContent: true });
|
||||
}
|
||||
}
|
||||
|
||||
export async function exportCanvas(
|
||||
type: ExportType,
|
||||
elements: readonly ExcalidrawElement[],
|
||||
canvas: HTMLCanvasElement,
|
||||
{
|
||||
exportBackground,
|
||||
exportPadding = 10,
|
||||
viewBackgroundColor,
|
||||
name,
|
||||
scale = 1,
|
||||
}: {
|
||||
exportBackground: boolean;
|
||||
exportPadding?: number;
|
||||
viewBackgroundColor: string;
|
||||
name: string;
|
||||
scale?: number;
|
||||
},
|
||||
) {
|
||||
if (!elements.length) {
|
||||
return window.alert(t("alerts.cannotExportEmptyCanvas"));
|
||||
}
|
||||
// calculate smallest area to fit the contents in
|
||||
|
||||
if (type === "svg") {
|
||||
const tempSvg = exportToSvg(elements, {
|
||||
exportBackground,
|
||||
viewBackgroundColor,
|
||||
exportPadding,
|
||||
});
|
||||
await fileSave(new Blob([tempSvg.outerHTML], { type: "image/svg+xml" }), {
|
||||
fileName: `${name}.svg`,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const tempCanvas = exportToCanvas(elements, {
|
||||
exportBackground,
|
||||
viewBackgroundColor,
|
||||
exportPadding,
|
||||
scale,
|
||||
});
|
||||
tempCanvas.style.display = "none";
|
||||
document.body.appendChild(tempCanvas);
|
||||
|
||||
if (type === "png") {
|
||||
const fileName = `${name}.png`;
|
||||
tempCanvas.toBlob(async (blob: any) => {
|
||||
if (blob) {
|
||||
await fileSave(blob, {
|
||||
fileName: fileName,
|
||||
});
|
||||
}
|
||||
});
|
||||
} else if (type === "clipboard") {
|
||||
try {
|
||||
copyCanvasToClipboardAsPng(tempCanvas);
|
||||
} catch (error) {
|
||||
window.alert(t("alerts.couldNotCopyToClipboard"));
|
||||
}
|
||||
} else if (type === "backend") {
|
||||
const appState = getDefaultAppState();
|
||||
if (exportBackground) {
|
||||
appState.viewBackgroundColor = viewBackgroundColor;
|
||||
}
|
||||
exportToBackend(elements, appState);
|
||||
}
|
||||
|
||||
// clean up the DOM
|
||||
if (tempCanvas !== canvas) {
|
||||
tempCanvas.remove();
|
||||
}
|
||||
}
|
||||
|
||||
function restore(
|
||||
savedElements: readonly ExcalidrawElement[],
|
||||
savedState: AppState | null,
|
||||
opts?: { scrollToContent: boolean },
|
||||
): DataState {
|
||||
const elements = savedElements
|
||||
.map(element => {
|
||||
let points: Point[] = [];
|
||||
if (element.type === "arrow") {
|
||||
if (Array.isArray(element.points)) {
|
||||
// if point array is empty, add one point to the arrow
|
||||
// this is used as fail safe to convert incoming data to a valid
|
||||
// arrow. In the new arrow, width and height are not being usde
|
||||
points = element.points.length > 0 ? element.points : [[0, 0]];
|
||||
} else {
|
||||
// convert old arrow type to a new one
|
||||
// old arrow spec used width and height
|
||||
// to determine the endpoints
|
||||
points = [
|
||||
[0, 0],
|
||||
[element.width, element.height],
|
||||
];
|
||||
}
|
||||
} else if (element.type === "line") {
|
||||
// old spec, pre-arrows
|
||||
// old spec, post-arrows
|
||||
if (!Array.isArray(element.points) || element.points.length === 0) {
|
||||
points = [
|
||||
[0, 0],
|
||||
[element.width, element.height],
|
||||
];
|
||||
} else {
|
||||
points = element.points;
|
||||
}
|
||||
} else {
|
||||
normalizeDimensions(element);
|
||||
}
|
||||
|
||||
return {
|
||||
...element,
|
||||
id: element.id || nanoid(),
|
||||
fillStyle: element.fillStyle || "hachure",
|
||||
strokeWidth: element.strokeWidth || 1,
|
||||
roughness: element.roughness || 1,
|
||||
opacity:
|
||||
element.opacity === null || element.opacity === undefined
|
||||
? 100
|
||||
: element.opacity,
|
||||
points,
|
||||
shape: null,
|
||||
canvas: null,
|
||||
canvasOffsetX: element.canvasOffsetX || 0,
|
||||
canvasOffsetY: element.canvasOffsetY || 0,
|
||||
};
|
||||
})
|
||||
.filter(el => !isInvisiblySmallElement(el));
|
||||
|
||||
if (opts?.scrollToContent && savedState) {
|
||||
savedState = { ...savedState, ...calculateScrollCenter(elements) };
|
||||
}
|
||||
|
||||
if (savedState) {
|
||||
savedState.zoom = savedState.zoom || getDefaultAppState().zoom;
|
||||
}
|
||||
|
||||
return {
|
||||
elements: elements,
|
||||
appState: savedState,
|
||||
};
|
||||
}
|
||||
|
||||
export function restoreFromLocalStorage() {
|
||||
const savedElements = localStorage.getItem(LOCAL_STORAGE_KEY);
|
||||
const savedState = localStorage.getItem(LOCAL_STORAGE_KEY_STATE);
|
||||
|
||||
let elements = [];
|
||||
if (savedElements) {
|
||||
try {
|
||||
elements = JSON.parse(savedElements).map(
|
||||
({ shape, ...element }: ExcalidrawElement) => element,
|
||||
);
|
||||
} catch (error) {
|
||||
// Do nothing because elements array is already empty
|
||||
}
|
||||
}
|
||||
|
||||
let appState = null;
|
||||
if (savedState) {
|
||||
try {
|
||||
appState = JSON.parse(savedState) as AppState;
|
||||
} catch (error) {
|
||||
// Do nothing because appState is already null
|
||||
}
|
||||
}
|
||||
|
||||
return restore(elements, appState);
|
||||
}
|
||||
|
||||
export function saveToLocalStorage(
|
||||
elements: readonly ExcalidrawElement[],
|
||||
appState: AppState,
|
||||
) {
|
||||
localStorage.setItem(
|
||||
LOCAL_STORAGE_KEY,
|
||||
JSON.stringify(
|
||||
elements.map(
|
||||
({ shape, canvas, ...element }: ExcalidrawElement) => element,
|
||||
),
|
||||
),
|
||||
);
|
||||
localStorage.setItem(
|
||||
LOCAL_STORAGE_KEY_STATE,
|
||||
JSON.stringify(clearAppStateForLocalStorage(appState)),
|
||||
);
|
||||
}
|
||||
|
||||
export async function loadScene(id: string | null, k?: string) {
|
||||
let data;
|
||||
let selectedId;
|
||||
if (id != null) {
|
||||
// k is the private key used to decrypt the content from the server, take
|
||||
// extra care not to leak it
|
||||
data = await importFromBackend(id, k);
|
||||
selectedId = id;
|
||||
window.history.replaceState({}, "Excalidraw", window.location.origin);
|
||||
} else {
|
||||
data = restoreFromLocalStorage();
|
||||
}
|
||||
|
||||
return {
|
||||
elements: data.elements,
|
||||
appState: data.appState && { ...data.appState, selectedId },
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
import { FlooredNumber } from "../types";
|
||||
import { ExcalidrawElement } from "../element/types";
|
||||
import { getCommonBounds } from "../element";
|
||||
|
||||
export function normalizeScroll(pos: number) {
|
||||
return Math.floor(pos) as FlooredNumber;
|
||||
}
|
||||
|
||||
export function calculateScrollCenter(
|
||||
elements: readonly ExcalidrawElement[],
|
||||
): { scrollX: FlooredNumber; scrollY: FlooredNumber } {
|
||||
const [x1, y1, x2, y2] = getCommonBounds(elements);
|
||||
|
||||
const centerX = (x1 + x2) / 2;
|
||||
const centerY = (y1 + y2) / 2;
|
||||
|
||||
return {
|
||||
scrollX: normalizeScroll(window.innerWidth / 2 - centerX),
|
||||
scrollY: normalizeScroll(window.innerHeight / 2 - centerY),
|
||||
};
|
||||
}
|
||||
Loading…
Reference in New Issue