({
26 | scene: 0,
27 | total: 0,
28 | });
29 |
30 | useEffect(() => {
31 | getStorageSizes((sizes) => {
32 | setStorageSizes(sizes);
33 | });
34 | });
35 | useEffect(() => () => getStorageSizes.cancel(), []);
36 |
37 | const version = getVersion();
38 | let hash;
39 | let timestamp;
40 |
41 | if (version !== DEFAULT_VERSION) {
42 | timestamp = version.slice(0, 16).replace("T", " ");
43 | hash = version.slice(21);
44 | } else {
45 | timestamp = t("stats.versionNotAvailable");
46 | }
47 |
48 | return (
49 | <>
50 |
51 | | {t("stats.storage")} |
52 |
53 |
54 | | {t("stats.scene")} |
55 | {nFormatter(storageSizes.scene, 1)} |
56 |
57 |
58 | | {t("stats.total")} |
59 | {nFormatter(storageSizes.total, 1)} |
60 |
61 |
62 | | {t("stats.version")} |
63 |
64 |
65 | {
69 | try {
70 | await copyTextToSystemClipboard(getVersion());
71 | props.setToastMessage(t("toast.copyToClipboard"));
72 | } catch {}
73 | }}
74 | title={t("stats.versionCopy")}
75 | >
76 | {timestamp}
77 |
78 | {hash}
79 | |
80 |
81 |
82 | );
83 | };
84 |
85 | export default CustomStats;
86 |
--------------------------------------------------------------------------------
/src/packages/excalidraw/webpack.dev.config.js:
--------------------------------------------------------------------------------
1 | const path = require("path");
2 | const webpack = require("webpack");
3 | const autoprefixer = require("autoprefixer");
4 |
5 | module.exports = {
6 | mode: "development",
7 | devtool: false,
8 | entry: {
9 | "excalidraw.development": "./entry.js",
10 | },
11 | output: {
12 | path: path.resolve(__dirname, "dist"),
13 | library: "Excalidraw",
14 | libraryTarget: "umd",
15 | filename: "[name].js",
16 | chunkFilename: "excalidraw-assets-dev/[name]-[contenthash].js",
17 | publicPath: "",
18 | },
19 | resolve: {
20 | extensions: [".js", ".ts", ".tsx", ".css", ".scss"],
21 | },
22 | module: {
23 | rules: [
24 | {
25 | test: /\.(sa|sc|c)ss$/,
26 | exclude: /node_modules/,
27 | use: [
28 | "style-loader",
29 | { loader: "css-loader" },
30 | {
31 | loader: "postcss-loader",
32 | options: {
33 | postcssOptions: {
34 | plugins: [autoprefixer()],
35 | },
36 | },
37 | },
38 | "sass-loader",
39 | ],
40 | },
41 | {
42 | test: /\.(ts|tsx|js|jsx|mjs)$/,
43 | exclude: /node_modules/,
44 | use: [
45 | {
46 | loader: "ts-loader",
47 | options: {
48 | transpileOnly: true,
49 | configFile: path.resolve(__dirname, "../tsconfig.dev.json"),
50 | },
51 | },
52 | ],
53 | },
54 | {
55 | test: /\.(woff|woff2|eot|ttf|otf)$/,
56 | use: [
57 | {
58 | loader: "file-loader",
59 | options: {
60 | name: "[name].[ext]",
61 | outputPath: "excalidraw-assets-dev",
62 | },
63 | },
64 | ],
65 | },
66 | ],
67 | },
68 | optimization: {
69 | splitChunks: {
70 | chunks: "async",
71 | cacheGroups: {
72 | vendors: {
73 | test: /[\\/]node_modules[\\/]/,
74 | name: "vendor",
75 | },
76 | },
77 | },
78 | },
79 | plugins: [new webpack.EvalSourceMapDevToolPlugin({ exclude: /vendor/ })],
80 | externals: {
81 | react: {
82 | root: "React",
83 | commonjs2: "react",
84 | commonjs: "react",
85 | amd: "react",
86 | },
87 | "react-dom": {
88 | root: "ReactDOM",
89 | commonjs2: "react-dom",
90 | commonjs: "react-dom",
91 | amd: "react-dom",
92 | },
93 | },
94 | };
95 |
--------------------------------------------------------------------------------
/src/components/Tooltip.tsx:
--------------------------------------------------------------------------------
1 | import "./Tooltip.scss";
2 |
3 | import React, { useEffect } from "react";
4 |
5 | const getTooltipDiv = () => {
6 | const existingDiv = document.querySelector(
7 | ".excalidraw-tooltip",
8 | );
9 | if (existingDiv) {
10 | return existingDiv;
11 | }
12 | const div = document.createElement("div");
13 | document.body.appendChild(div);
14 | div.classList.add("excalidraw-tooltip");
15 | return div;
16 | };
17 |
18 | const updateTooltip = (
19 | item: HTMLDivElement,
20 | tooltip: HTMLDivElement,
21 | label: string,
22 | long: boolean,
23 | ) => {
24 | tooltip.classList.add("excalidraw-tooltip--visible");
25 | tooltip.style.minWidth = long ? "50ch" : "10ch";
26 | tooltip.style.maxWidth = long ? "50ch" : "15ch";
27 |
28 | tooltip.textContent = label;
29 |
30 | const {
31 | x: itemX,
32 | bottom: itemBottom,
33 | top: itemTop,
34 | width: itemWidth,
35 | } = item.getBoundingClientRect();
36 |
37 | const {
38 | width: labelWidth,
39 | height: labelHeight,
40 | } = tooltip.getBoundingClientRect();
41 |
42 | const viewportWidth = window.innerWidth;
43 | const viewportHeight = window.innerHeight;
44 |
45 | const margin = 5;
46 |
47 | const left = itemX + itemWidth / 2 - labelWidth / 2;
48 | const offsetLeft =
49 | left + labelWidth >= viewportWidth ? left + labelWidth - viewportWidth : 0;
50 |
51 | const top = itemBottom + margin;
52 | const offsetTop =
53 | top + labelHeight >= viewportHeight
54 | ? itemBottom - itemTop + labelHeight + margin * 2
55 | : 0;
56 |
57 | Object.assign(tooltip.style, {
58 | top: `${top - offsetTop}px`,
59 | left: `${left - offsetLeft}px`,
60 | });
61 | };
62 |
63 | type TooltipProps = {
64 | children: React.ReactNode;
65 | label: string;
66 | long?: boolean;
67 | };
68 |
69 | export const Tooltip = ({ children, label, long = false }: TooltipProps) => {
70 | useEffect(() => {
71 | return () =>
72 | getTooltipDiv().classList.remove("excalidraw-tooltip--visible");
73 | }, []);
74 |
75 | return (
76 |
79 | updateTooltip(
80 | event.currentTarget as HTMLDivElement,
81 | getTooltipDiv(),
82 | label,
83 | long,
84 | )
85 | }
86 | onPointerLeave={() =>
87 | getTooltipDiv().classList.remove("excalidraw-tooltip--visible")
88 | }
89 | >
90 | {children}
91 |
92 | );
93 | };
94 |
--------------------------------------------------------------------------------
/src/scene/scroll.ts:
--------------------------------------------------------------------------------
1 | import { AppState, PointerCoords, Zoom } from "../types";
2 | import { ExcalidrawElement } from "../element/types";
3 | import {
4 | getCommonBounds,
5 | getClosestElementBounds,
6 | getVisibleElements,
7 | } from "../element";
8 |
9 | import {
10 | sceneCoordsToViewportCoords,
11 | viewportCoordsToSceneCoords,
12 | } from "../utils";
13 |
14 | const isOutsideViewPort = (
15 | appState: AppState,
16 | canvas: HTMLCanvasElement | null,
17 | cords: Array,
18 | ) => {
19 | const [x1, y1, x2, y2] = cords;
20 | const { x: viewportX1, y: viewportY1 } = sceneCoordsToViewportCoords(
21 | { sceneX: x1, sceneY: y1 },
22 | appState,
23 | );
24 | const { x: viewportX2, y: viewportY2 } = sceneCoordsToViewportCoords(
25 | { sceneX: x2, sceneY: y2 },
26 | appState,
27 | );
28 | return (
29 | viewportX2 - viewportX1 > appState.width ||
30 | viewportY2 - viewportY1 > appState.height
31 | );
32 | };
33 |
34 | export const centerScrollOn = ({
35 | scenePoint,
36 | viewportDimensions,
37 | zoom,
38 | }: {
39 | scenePoint: PointerCoords;
40 | viewportDimensions: { height: number; width: number };
41 | zoom: Zoom;
42 | }) => {
43 | return {
44 | scrollX:
45 | (viewportDimensions.width / 2) * (1 / zoom.value) -
46 | scenePoint.x -
47 | zoom.translation.x * (1 / zoom.value),
48 | scrollY:
49 | (viewportDimensions.height / 2) * (1 / zoom.value) -
50 | scenePoint.y -
51 | zoom.translation.y * (1 / zoom.value),
52 | };
53 | };
54 |
55 | export const calculateScrollCenter = (
56 | elements: readonly ExcalidrawElement[],
57 | appState: AppState,
58 | canvas: HTMLCanvasElement | null,
59 | ): { scrollX: number; scrollY: number } => {
60 | elements = getVisibleElements(elements);
61 |
62 | if (!elements.length) {
63 | return {
64 | scrollX: 0,
65 | scrollY: 0,
66 | };
67 | }
68 | let [x1, y1, x2, y2] = getCommonBounds(elements);
69 |
70 | if (isOutsideViewPort(appState, canvas, [x1, y1, x2, y2])) {
71 | [x1, y1, x2, y2] = getClosestElementBounds(
72 | elements,
73 | viewportCoordsToSceneCoords(
74 | { clientX: appState.scrollX, clientY: appState.scrollY },
75 | appState,
76 | ),
77 | );
78 | }
79 |
80 | const centerX = (x1 + x2) / 2;
81 | const centerY = (y1 + y2) / 2;
82 |
83 | return centerScrollOn({
84 | scenePoint: { x: centerX, y: centerY },
85 | viewportDimensions: { width: appState.width, height: appState.height },
86 | zoom: appState.zoom,
87 | });
88 | };
89 |
--------------------------------------------------------------------------------
/src/tests/geometricAlgebra.test.ts:
--------------------------------------------------------------------------------
1 | import * as GA from "../ga";
2 | import { point, toString, direction, offset } from "../ga";
3 | import * as GAPoint from "../gapoints";
4 | import * as GALine from "../galines";
5 | import * as GATransform from "../gatransforms";
6 |
7 | describe("geometric algebra", () => {
8 | describe("points", () => {
9 | it("distanceToLine", () => {
10 | const point = GA.point(3, 3);
11 | const line = GALine.equation(0, 1, -1);
12 | expect(GAPoint.distanceToLine(point, line)).toEqual(2);
13 | });
14 |
15 | it("distanceToLine neg", () => {
16 | const point = GA.point(-3, -3);
17 | const line = GALine.equation(0, 1, -1);
18 | expect(GAPoint.distanceToLine(point, line)).toEqual(-4);
19 | });
20 | });
21 | describe("lines", () => {
22 | it("through", () => {
23 | const a = GA.point(0, 0);
24 | const b = GA.point(2, 0);
25 | expect(toString(GALine.through(a, b))).toEqual(
26 | toString(GALine.equation(0, 2, 0)),
27 | );
28 | });
29 | it("parallel", () => {
30 | const point = GA.point(3, 3);
31 | const line = GALine.equation(0, 1, -1);
32 | const parallel = GALine.parallel(line, 2);
33 | expect(GAPoint.distanceToLine(point, parallel)).toEqual(0);
34 | });
35 | });
36 |
37 | describe("translation", () => {
38 | it("points", () => {
39 | const start = point(2, 2);
40 | const move = GATransform.translation(direction(0, 1));
41 | const end = GATransform.apply(move, start);
42 | expect(toString(end)).toEqual(toString(point(2, 3)));
43 | });
44 |
45 | it("points 2", () => {
46 | const start = point(2, 2);
47 | const move = GATransform.translation(offset(3, 4));
48 | const end = GATransform.apply(move, start);
49 | expect(toString(end)).toEqual(toString(point(5, 6)));
50 | });
51 |
52 | it("lines", () => {
53 | const original = GALine.through(point(2, 2), point(3, 4));
54 | const move = GATransform.translation(offset(3, 4));
55 | const parallel = GATransform.apply(move, original);
56 | expect(toString(parallel)).toEqual(
57 | toString(GALine.through(point(5, 6), point(6, 8))),
58 | );
59 | });
60 | });
61 | describe("rotation", () => {
62 | it("points", () => {
63 | const start = point(2, 2);
64 | const pivot = point(1, 1);
65 | const rotate = GATransform.rotation(pivot, Math.PI / 2);
66 | const end = GATransform.apply(rotate, start);
67 | expect(toString(end)).toEqual(toString(point(2, 0)));
68 | });
69 | });
70 | });
71 |
--------------------------------------------------------------------------------
/src/components/HintViewer.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { t } from "../i18n";
3 | import { NonDeletedExcalidrawElement } from "../element/types";
4 | import { getSelectedElements } from "../scene";
5 |
6 | import "./HintViewer.scss";
7 | import { AppState } from "../types";
8 | import { isLinearElement, isTextElement } from "../element/typeChecks";
9 | import { getShortcutKey } from "../utils";
10 |
11 | interface Hint {
12 | appState: AppState;
13 | elements: readonly NonDeletedExcalidrawElement[];
14 | }
15 |
16 | const getHints = ({ appState, elements }: Hint) => {
17 | const { elementType, isResizing, isRotating, lastPointerDownWith } = appState;
18 | const multiMode = appState.multiElement !== null;
19 | if (elementType === "arrow" || elementType === "line") {
20 | if (!multiMode) {
21 | return t("hints.linearElement");
22 | }
23 | return t("hints.linearElementMulti");
24 | }
25 |
26 | if (elementType === "freedraw") {
27 | return t("hints.freeDraw");
28 | }
29 |
30 | if (elementType === "text") {
31 | return t("hints.text");
32 | }
33 |
34 | const selectedElements = getSelectedElements(elements, appState);
35 | if (
36 | isResizing &&
37 | lastPointerDownWith === "mouse" &&
38 | selectedElements.length === 1
39 | ) {
40 | const targetElement = selectedElements[0];
41 | if (isLinearElement(targetElement) && targetElement.points.length === 2) {
42 | return t("hints.lockAngle");
43 | }
44 | return t("hints.resize");
45 | }
46 |
47 | if (isRotating && lastPointerDownWith === "mouse") {
48 | return t("hints.rotate");
49 | }
50 |
51 | if (selectedElements.length === 1 && isLinearElement(selectedElements[0])) {
52 | if (appState.editingLinearElement) {
53 | return appState.editingLinearElement.activePointIndex
54 | ? t("hints.lineEditor_pointSelected")
55 | : t("hints.lineEditor_nothingSelected");
56 | }
57 | return t("hints.lineEditor_info");
58 | }
59 |
60 | if (selectedElements.length === 1 && isTextElement(selectedElements[0])) {
61 | return t("hints.text_selected");
62 | }
63 |
64 | if (appState.editingElement && isTextElement(appState.editingElement)) {
65 | return t("hints.text_editing");
66 | }
67 |
68 | return null;
69 | };
70 |
71 | export const HintViewer = ({ appState, elements }: Hint) => {
72 | let hint = getHints({
73 | appState,
74 | elements,
75 | });
76 | if (!hint) {
77 | return null;
78 | }
79 |
80 | hint = getShortcutKey(hint);
81 |
82 | return (
83 |
84 | {hint}
85 |
86 | );
87 | };
88 |
--------------------------------------------------------------------------------
/src/element/typeChecks.ts:
--------------------------------------------------------------------------------
1 | import {
2 | ExcalidrawElement,
3 | ExcalidrawTextElement,
4 | ExcalidrawLinearElement,
5 | ExcalidrawBindableElement,
6 | ExcalidrawGenericElement,
7 | ExcalidrawFreeDrawElement,
8 | } from "./types";
9 |
10 | export const isGenericElement = (
11 | element: ExcalidrawElement | null,
12 | ): element is ExcalidrawGenericElement => {
13 | return (
14 | element != null &&
15 | (element.type === "selection" ||
16 | element.type === "rectangle" ||
17 | element.type === "diamond" ||
18 | element.type === "ellipse")
19 | );
20 | };
21 |
22 | export const isTextElement = (
23 | element: ExcalidrawElement | null,
24 | ): element is ExcalidrawTextElement => {
25 | return element != null && element.type === "text";
26 | };
27 |
28 | export const isFreeDrawElement = (
29 | element?: ExcalidrawElement | null,
30 | ): element is ExcalidrawFreeDrawElement => {
31 | return element != null && isFreeDrawElementType(element.type);
32 | };
33 |
34 | export const isFreeDrawElementType = (
35 | elementType: ExcalidrawElement["type"],
36 | ): boolean => {
37 | return elementType === "freedraw";
38 | };
39 |
40 | export const isLinearElement = (
41 | element?: ExcalidrawElement | null,
42 | ): element is ExcalidrawLinearElement => {
43 | return element != null && isLinearElementType(element.type);
44 | };
45 |
46 | export const isLinearElementType = (
47 | elementType: ExcalidrawElement["type"],
48 | ): boolean => {
49 | return (
50 | elementType === "arrow" || elementType === "line" // || elementType === "freedraw"
51 | );
52 | };
53 |
54 | export const isBindingElement = (
55 | element?: ExcalidrawElement | null,
56 | ): element is ExcalidrawLinearElement => {
57 | return element != null && isBindingElementType(element.type);
58 | };
59 |
60 | export const isBindingElementType = (
61 | elementType: ExcalidrawElement["type"],
62 | ): boolean => {
63 | return elementType === "arrow";
64 | };
65 |
66 | export const isBindableElement = (
67 | element: ExcalidrawElement | null,
68 | ): element is ExcalidrawBindableElement => {
69 | return (
70 | element != null &&
71 | (element.type === "rectangle" ||
72 | element.type === "diamond" ||
73 | element.type === "ellipse" ||
74 | element.type === "text")
75 | );
76 | };
77 |
78 | export const isExcalidrawElement = (element: any): boolean => {
79 | return (
80 | element?.type === "text" ||
81 | element?.type === "diamond" ||
82 | element?.type === "rectangle" ||
83 | element?.type === "ellipse" ||
84 | element?.type === "arrow" ||
85 | element?.type === "freedraw" ||
86 | element?.type === "line"
87 | );
88 | };
89 |
--------------------------------------------------------------------------------
/src/packages/excalidraw/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@excalidraw/excalidraw",
3 | "version": "0.9.0",
4 | "main": "main.js",
5 | "types": "types/packages/excalidraw/index.d.ts",
6 | "files": [
7 | "dist/*",
8 | "types/*"
9 | ],
10 | "publishConfig": {
11 | "access": "public"
12 | },
13 | "description": "Excalidraw as a React component",
14 | "repository": "https://github.com/excalidraw/excalidraw",
15 | "license": "MIT",
16 | "keywords": [
17 | "excalidraw",
18 | "excalidraw-embed",
19 | "react",
20 | "npm",
21 | "npm excalidraw"
22 | ],
23 | "browserslist": {
24 | "production": [
25 | ">0.2%",
26 | "not dead",
27 | "not ie <= 11",
28 | "not op_mini all",
29 | "not safari < 12",
30 | "not kaios <= 2.5",
31 | "not edge < 79",
32 | "not chrome < 70",
33 | "not and_uc < 13",
34 | "not samsung < 10"
35 | ],
36 | "development": [
37 | "last 1 chrome version",
38 | "last 1 firefox version",
39 | "last 1 safari version"
40 | ]
41 | },
42 | "peerDependencies": {
43 | "react": "^17.0.2",
44 | "react-dom": "^17.0.2"
45 | },
46 | "devDependencies": {
47 | "@babel/core": "7.14.8",
48 | "@babel/plugin-transform-arrow-functions": "7.14.5",
49 | "@babel/plugin-transform-async-to-generator": "7.14.5",
50 | "@babel/plugin-transform-runtime": "7.14.5",
51 | "@babel/plugin-transform-typescript": "7.14.6",
52 | "@babel/preset-env": "7.14.9",
53 | "@babel/preset-react": "7.14.5",
54 | "@babel/preset-typescript": "7.14.5",
55 | "autoprefixer": "10.3.1",
56 | "babel-loader": "8.2.2",
57 | "babel-plugin-transform-class-properties": "6.24.1",
58 | "cross-env": "7.0.3",
59 | "css-loader": "5.2.6",
60 | "file-loader": "6.2.0",
61 | "mini-css-extract-plugin": "1.6.1",
62 | "postcss-loader": "6.1.1",
63 | "sass-loader": "12.1.0",
64 | "terser-webpack-plugin": "5.1.4",
65 | "ts-loader": "9.2.4",
66 | "typescript": "4.3.5",
67 | "webpack": "5.50.0",
68 | "webpack-bundle-analyzer": "4.4.2",
69 | "webpack-cli": "4.7.2"
70 | },
71 | "bugs": "https://github.com/excalidraw/excalidraw/issues",
72 | "homepage": "https://github.com/excalidraw/excalidraw/tree/master/src/packages/excalidraw",
73 | "scripts": {
74 | "gen:types": "tsc --project ../../../tsconfig-types.json",
75 | "build:umd": "cross-env NODE_ENV=production webpack --config webpack.prod.config.js && cross-env NODE_ENV=development webpack --config webpack.dev.config.js && yarn gen:types",
76 | "build:umd:withAnalyzer": "cross-env NODE_ENV=production ANALYZER=true webpack --config webpack.prod.config.js",
77 | "pack": "yarn build:umd && yarn pack"
78 | }
79 | }
80 |
--------------------------------------------------------------------------------
/src/actions/actionStyles.ts:
--------------------------------------------------------------------------------
1 | import {
2 | isTextElement,
3 | isExcalidrawElement,
4 | redrawTextBoundingBox,
5 | } from "../element";
6 | import { CODES, KEYS } from "../keys";
7 | import { t } from "../i18n";
8 | import { register } from "./register";
9 | import { mutateElement, newElementWith } from "../element/mutateElement";
10 | import {
11 | DEFAULT_FONT_SIZE,
12 | DEFAULT_FONT_FAMILY,
13 | DEFAULT_TEXT_ALIGN,
14 | } from "../constants";
15 |
16 | // `copiedStyles` is exported only for tests.
17 | export let copiedStyles: string = "{}";
18 |
19 | export const actionCopyStyles = register({
20 | name: "copyStyles",
21 | perform: (elements, appState) => {
22 | const element = elements.find((el) => appState.selectedElementIds[el.id]);
23 | if (element) {
24 | copiedStyles = JSON.stringify(element);
25 | }
26 | return {
27 | appState: {
28 | ...appState,
29 | toastMessage: t("toast.copyStyles"),
30 | },
31 | commitToHistory: false,
32 | };
33 | },
34 | contextItemLabel: "labels.copyStyles",
35 | keyTest: (event) =>
36 | event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.C,
37 | });
38 |
39 | export const actionPasteStyles = register({
40 | name: "pasteStyles",
41 | perform: (elements, appState) => {
42 | const pastedElement = JSON.parse(copiedStyles);
43 | if (!isExcalidrawElement(pastedElement)) {
44 | return { elements, commitToHistory: false };
45 | }
46 | return {
47 | elements: elements.map((element) => {
48 | if (appState.selectedElementIds[element.id]) {
49 | const newElement = newElementWith(element, {
50 | backgroundColor: pastedElement?.backgroundColor,
51 | strokeWidth: pastedElement?.strokeWidth,
52 | strokeColor: pastedElement?.strokeColor,
53 | strokeStyle: pastedElement?.strokeStyle,
54 | fillStyle: pastedElement?.fillStyle,
55 | opacity: pastedElement?.opacity,
56 | roughness: pastedElement?.roughness,
57 | });
58 | if (isTextElement(newElement)) {
59 | mutateElement(newElement, {
60 | fontSize: pastedElement?.fontSize || DEFAULT_FONT_SIZE,
61 | fontFamily: pastedElement?.fontFamily || DEFAULT_FONT_FAMILY,
62 | textAlign: pastedElement?.textAlign || DEFAULT_TEXT_ALIGN,
63 | });
64 | redrawTextBoundingBox(newElement);
65 | }
66 | return newElement;
67 | }
68 | return element;
69 | }),
70 | commitToHistory: true,
71 | };
72 | },
73 | contextItemLabel: "labels.pasteStyles",
74 | keyTest: (event) =>
75 | event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.V,
76 | });
77 |
--------------------------------------------------------------------------------
/src/components/Modal.tsx:
--------------------------------------------------------------------------------
1 | import "./Modal.scss";
2 |
3 | import React, { useState, useLayoutEffect, useRef } from "react";
4 | import { createPortal } from "react-dom";
5 | import clsx from "clsx";
6 | import { KEYS } from "../keys";
7 | import { useExcalidrawContainer, useIsMobile } from "./App";
8 | import { AppState } from "../types";
9 |
10 | export const Modal = (props: {
11 | className?: string;
12 | children: React.ReactNode;
13 | maxWidth?: number;
14 | onCloseRequest(): void;
15 | labelledBy: string;
16 | theme?: AppState["theme"];
17 | }) => {
18 | const { theme = "light" } = props;
19 | const modalRoot = useBodyRoot(theme);
20 |
21 | if (!modalRoot) {
22 | return null;
23 | }
24 |
25 | const handleKeydown = (event: React.KeyboardEvent) => {
26 | if (event.key === KEYS.ESCAPE) {
27 | event.nativeEvent.stopImmediatePropagation();
28 | event.stopPropagation();
29 | props.onCloseRequest();
30 | }
31 | };
32 |
33 | return createPortal(
34 |
41 |
42 |
47 | {props.children}
48 |
49 |