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