` component. Note that the custom header will still include the default buttons.
### Sidebar.Header
@@ -102,7 +100,10 @@ function App() {
return (
-
excalidrawAPI.toggleMenu("customSidebar")}>
+ excalidrawAPI.toggleMenu("customSidebar")}
+ >
Toggle Custom Sidebar
- (element: NonDeleted<ExcalidrawEmbeddableElement>, appState: AppState ) => JSX.Element | null
+ (element: NonDeleted<ExcalidrawEmbeddableElement>, appState:{" "}
+
+ AppState
+
+ ) => JSX.Element | null
Allows you to replace the renderer for embeddable elements (which renders `
- setExcalidrawAPI(api)}
-/>
+ setExcalidrawAPI(api)} />
>
- )
+ );
}
```
-
### exportToBlob
**_Signature_**
-exportToBlob(
- opts: ExportOpts & {
- mimeType?: string,
- quality?: number,
- exportPadding?: number;
-})
+ exportToBlob(
+
+ opts:{" "}
+
+ ExportOpts
+ {" "}
+ & {
+
+ mimeType?: string,
+
+ quality?: number,
+
+ exportPadding?: number;
+
+ })
| Name | Type | Default | Description |
| --- | --- | --- | --- |
-| `opts` | `object` | _ | This param is passed to `exportToCanvas`. You can refer to [`exportToCanvas`](#exporttocanvas) |
+| `opts` | `object` | \_ | This param is passed to `exportToCanvas`. You can refer to [`exportToCanvas`](#exporttocanvas) |
| `mimeType` | `string` | `image/png` | Indicates the image format. |
| `quality` | `number` | `0.92` | A value between `0` and `1` indicating the [image quality](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#parameters). Applies only to `image/jpeg`/`image/webp` MIME types. |
| `exportPadding` | `number` | `10` | The padding to be added on canvas. |
@@ -132,26 +150,31 @@ Returns a promise which resolves with a [blob](https://developer.mozilla.org/en-
**_Signature_**
-exportToSvg({
- elements:
-
- ExcalidrawElement[]
- ,
- appState:
- AppState
- ,
- exportPadding: number,
- metadata: string,
- files:
+ exportToSvg({
+
+ elements:
+
+ ExcalidrawElement[]
+ ,
+ appState:
+
+ {" "}
+ AppState
+ ,
+ exportPadding: number,
+
+ metadata: string,
+
+ files:
- BinaryFiles
- ,
-});
+ BinaryFiles
+ ,
+ });
| Name | Type | Default | Description |
| --- | --- | --- | --- |
-| elements | [Excalidraw Element []](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114) | | The elements to exported as `svg `|
+| elements | [Excalidraw Element []](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114) | | The elements to exported as `svg ` |
| appState | [AppState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95) | [defaultAppState](https://github.com/excalidraw/excalidraw/blob/master/src/appState.ts#L11) | The `appState` of the scene |
| exportPadding | number | 10 | The `padding` to be added on canvas |
| files | [BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L64) | undefined | The `files` added to the scene. |
@@ -163,12 +186,21 @@ This function returns a promise which resolves to `svg` of the exported drawing.
**_Signature_**
-exportToClipboard(
- opts: ExportOpts & {
- mimeType?: string,
- quality?: number;
- type: 'png' | 'svg' |'json'
-})
+ exportToClipboard(
+
+ opts:{" "}
+
+ ExportOpts
+ {" "}
+ & {
+
+ mimeType?: string,
+
+ quality?: number;
+
+ type: 'png' | 'svg' |'json'
+
+ })
| Name | Type | Default | Description |
@@ -176,7 +208,7 @@ exportToClipboard(
| `opts` | | | This param is same as the params passed to `exportToCanvas`. You can refer to [`exportToCanvas`](#exporttocanvas). |
| `mimeType` | `string` | `image/png` | Indicates the image format, this will be used when exporting as `png`. |
| `quality` | `number` | `0.92` | A value between `0` and `1` indicating the [image quality](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#parameters). Applies only to `image/jpeg` / `image/webp` MIME types. This will be used when exporting as `png`. |
-| `type` | 'png' | 'svg' | 'json' | _ | This determines the format to which the scene data should be `exported`. |
+| `type` | 'png' | 'svg' | 'json' | \_ | This determines the format to which the scene data should be `exported`. |
**How to use**
diff --git a/dev-docs/docs/@excalidraw/excalidraw/api/utils/restore.mdx b/dev-docs/docs/@excalidraw/excalidraw/api/utils/restore.mdx
index 665a1ef9f..b49409d8f 100644
--- a/dev-docs/docs/@excalidraw/excalidraw/api/utils/restore.mdx
+++ b/dev-docs/docs/@excalidraw/excalidraw/api/utils/restore.mdx
@@ -8,7 +8,15 @@ id: "restore"
**_Signature_**
-restoreAppState(appState: ImportedDataState["appState"] , localAppState: Partial<AppState > | null): AppState
+ restoreAppState(appState:{" "}
+
+ ImportedDataState["appState"]
+
+ ,
+ localAppState: Partial<
+
+ AppState
+ > | null): AppState
**_How to use_**
@@ -20,26 +28,36 @@ import { restoreAppState } from "@excalidraw/excalidraw";
This function will make sure all the `keys` have appropriate `values` in [appState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95) and if any key is missing, it will be set to its `default` value.
When `localAppState` is supplied, it's used in place of values that are missing (`undefined`) in `appState` instead of the defaults.
-Use this as a way to not override user's defaults if you persist them.
-You can pass `null` / `undefined` if not applicable.
+Use this as a way to not override user's defaults if you persist them. You can pass `null` / `undefined` if not applicable.
### restoreElements
**_Signature_**
-restoreElements(
- elements: ImportedDataState["elements"] ,
- localElements: ExcalidrawElement[] | null | undefined): ExcalidrawElement[] ,
- opts: { refreshDimensions?: boolean, repairBindings?: boolean }
-)
+ restoreElements( elements:{" "}
+
+ ImportedDataState["elements"]
+
+ ,
+ localElements:{" "}
+
+ ExcalidrawElement[]
+ {" "}
+ | null | undefined):{" "}
+
+ ExcalidrawElement[]
+
+ ,
+ opts: { refreshDimensions?: boolean, repairBindings?: boolean }
+ )
| Prop | Type | Description |
-| ---- | ---- | ---- |
+| --- | --- | --- |
| `elements` | ImportedDataState["elements"] | The `elements` to be restored |
-| [`localElements`](#localelements) | ExcalidrawElement[] | null | undefined | When `localElements` are supplied, they are used to ensure that existing restored elements reuse `version` (and increment it), and regenerate `versionNonce`. |
-| [`opts`](#opts) | `Object` | The extra optional parameter to configure restored elements
+| [`localElements`](#localelements) | ExcalidrawElement[] | null | undefined | When `localElements` are supplied, they are used to ensure that existing restored elements reuse `version` (and increment it), and regenerate `versionNonce`. |
+| [`opts`](#opts) | `Object` | The extra optional parameter to configure restored elements |
#### localElements
@@ -47,12 +65,13 @@ When `localElements` are supplied, they are used to ensure that existing restore
Use this when you `import` elements which may already be present in the scene to ensure that you do not disregard the newly imported elements if you're using element version to detect the update
#### opts
+
The extra optional parameter to configure restored elements. It has the following attributes
-| Prop | Type | Description|
-| --- | --- | ------|
+| Prop | Type | Description |
+| --- | --- | --- |
| `refreshDimensions` | `boolean` | Indicates whether we should also `recalculate` text element dimensions. Since this is a potentially costly operation, you may want to disable it if you restore elements in tight loops, such as during collaboration. |
-| `repairBindings` |`boolean` | Indicates whether the `bindings` for the elements should be repaired. This is to make sure there are no containers with non existent bound text element id and no bound text elements with non existent container id. |
+| `repairBindings` | `boolean` | Indicates whether the `bindings` for the elements should be repaired. This is to make sure there are no containers with non existent bound text element id and no bound text elements with non existent container id. |
**_How to use_**
@@ -69,13 +88,29 @@ Parameter `refreshDimensions` indicates whether we should also `recalculate` tex
**_Signature_**
-restore(
- data: ImportedDataState ,
- localAppState: Partial<AppState > | null | undefined,
- localElements: ExcalidrawElement[] | null | undefined ): DataState
- opts: { refreshDimensions?: boolean, repairBindings?: boolean }
-
-)
+ restore( data:{" "}
+
+ ImportedDataState
+
+ ,
+ localAppState: Partial<
+
+ AppState
+
+ > | null | undefined,
+
+ localElements:{" "}
+
+ ExcalidrawElement[]
+ {" "}
+ | null | undefined
+
+ ):{" "}
+
+ DataState
+
+
+ opts: { refreshDimensions?: boolean, repairBindings?: boolean } )
See [`restoreAppState()`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#restoreAppState) about `localAppState`, and [`restoreElements()`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#restoreElements) about `localElements`.
@@ -93,8 +128,12 @@ This function makes sure elements and state is set to appropriate values and set
**_Signature_**
-restoreLibraryItems(libraryItems: ImportedDataState["libraryItems"] ,
-defaultStatus: "published" | "unpublished")
+ restoreLibraryItems(libraryItems:{" "}
+
+ ImportedDataState["libraryItems"]
+
+ ,
+ defaultStatus: "published" | "unpublished")
**_How to use_**
diff --git a/dev-docs/docs/@excalidraw/excalidraw/customizing-styles.mdx b/dev-docs/docs/@excalidraw/excalidraw/customizing-styles.mdx
index 7a1d423fc..a1ee434d1 100644
--- a/dev-docs/docs/@excalidraw/excalidraw/customizing-styles.mdx
+++ b/dev-docs/docs/@excalidraw/excalidraw/customizing-styles.mdx
@@ -38,6 +38,7 @@ For a complete list of variables, check [theme.scss](https://github.com/excalidr
--color-primary-light: #dcbec9;
}
```
+
```tsx live
function App() {
return (
diff --git a/dev-docs/docs/@excalidraw/excalidraw/faq.mdx b/dev-docs/docs/@excalidraw/excalidraw/faq.mdx
index 4684d6c79..a5d740a05 100644
--- a/dev-docs/docs/@excalidraw/excalidraw/faq.mdx
+++ b/dev-docs/docs/@excalidraw/excalidraw/faq.mdx
@@ -6,13 +6,11 @@ No, Excalidraw package doesn't come with collaboration built in, since the imple
### Turning off Aggressive Anti-Fingerprinting in Brave browser
-When *Aggressive Anti-Fingerprinting* is turned on, the `measureText` API breaks which in turn breaks the Text Elements in your drawings. Here is more [info](https://github.com/excalidraw/excalidraw/pull/6336) on the same.
+When _Aggressive Anti-Fingerprinting_ is turned on, the `measureText` API breaks which in turn breaks the Text Elements in your drawings. Here is more [info](https://github.com/excalidraw/excalidraw/pull/6336) on the same.
We strongly recommend turning it off. You can follow the steps below on how to do so.
-
-1. Open [excalidraw.com](https://excalidraw.com) in Brave and click on the **Shield** button
-
+1. Open [excalidraw.com](https://excalidraw.com) in Brave and click on the **Shield** button 
@@ -30,8 +28,6 @@ We strongly recommend turning it off. You can follow the steps below on how to d
If disabling this setting doesn't fix the display of text elements, please consider opening an [issue](https://github.com/excalidraw/excalidraw/issues/new) on our GitHub, or message us on [Discord](https://discord.gg/UexuTaE).
-
-
## Need help?
Check out the existing [Q&A](https://github.com/excalidraw/excalidraw/discussions?discussions_q=label%3Apackage%3Aexcalidraw). If you have any queries or need help, ask us [here](https://github.com/excalidraw/excalidraw/discussions?discussions_q=label%3Apackage%3Aexcalidraw).
diff --git a/dev-docs/docs/@excalidraw/excalidraw/integration.mdx b/dev-docs/docs/@excalidraw/excalidraw/integration.mdx
index 7080c32e9..631b476c8 100644
--- a/dev-docs/docs/@excalidraw/excalidraw/integration.mdx
+++ b/dev-docs/docs/@excalidraw/excalidraw/integration.mdx
@@ -41,7 +41,9 @@ import { useState, useEffect } from "react";
export default function App() {
const [Excalidraw, setExcalidraw] = useState(null);
useEffect(() => {
- import("@excalidraw/excalidraw").then((comp) => setExcalidraw(comp.Excalidraw));
+ import("@excalidraw/excalidraw").then((comp) =>
+ setExcalidraw(comp.Excalidraw),
+ );
}, []);
return <>{Excalidraw &&
}>;
}
@@ -80,7 +82,7 @@ import TabItem from "@theme/TabItem";
```html
-
+
Excalidraw in browser
diff --git a/dev-docs/docs/introduction/contributing.mdx b/dev-docs/docs/introduction/contributing.mdx
index 169aa5355..0d7c9b0c6 100644
--- a/dev-docs/docs/introduction/contributing.mdx
+++ b/dev-docs/docs/introduction/contributing.mdx
@@ -2,8 +2,7 @@
Pull requests are welcome. For major changes, please [open an issue](https://github.com/excalidraw/excalidraw/issues/new) first to discuss what you would like to change.
-We have a [roadmap](https://github.com/orgs/excalidraw/projects/3) which we strongly recommend to go through and check if something interests you.
-For new contributors we would recommend to start with *Easy* tasks.
+We have a [roadmap](https://github.com/orgs/excalidraw/projects/3) which we strongly recommend to go through and check if something interests you. For new contributors we would recommend to start with _Easy_ tasks.
In case you want to pick up something from the roadmap, comment on that issue and one of the project maintainers will assign it to you, post which you can discuss in the issue and start working on it.
@@ -69,10 +68,7 @@ It's also a good idea to consider if your change should include additional tests
Finally - always manually test your changes using the convenient staging environment deployed for each pull request. As much as local development attempts to replicate production, there can still be subtle differences in behavior. For larger features consider testing your change in multiple browsers as well.
-:::note
-Some checks, such as the `lint` and `test`, require approval from the maintainers to run.
-They will appear as `Expected — Waiting for status to be reported` in the PR checks when they are waiting for approval.
-:::
+:::note Some checks, such as the `lint` and `test`, require approval from the maintainers to run. They will appear as `Expected — Waiting for status to be reported` in the PR checks when they are waiting for approval. :::
## Translating
diff --git a/index.html b/index.html
index cbdc7706c..c31510e4d 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,4 @@
-
+
diff --git a/src/actions/actionFrame.ts b/src/actions/actionFrame.ts
index 339545f87..42d204620 100644
--- a/src/actions/actionFrame.ts
+++ b/src/actions/actionFrame.ts
@@ -29,10 +29,13 @@ export const actionSelectAllElementsInFrame = register({
elements,
appState: {
...appState,
- selectedElementIds: elementsInFrame.reduce((acc, element) => {
- acc[element.id] = true;
- return acc;
- }, {} as Record),
+ selectedElementIds: elementsInFrame.reduce(
+ (acc, element) => {
+ acc[element.id] = true;
+ return acc;
+ },
+ {} as Record,
+ ),
},
commitToHistory: false,
};
diff --git a/src/appState.ts b/src/appState.ts
index c0c23a9c2..00fd07804 100644
--- a/src/appState.ts
+++ b/src/appState.ts
@@ -215,11 +215,11 @@ const _clearAppStateForStorage = <
exportType: ExportType,
) => {
type ExportableKeys = {
- [K in keyof typeof APP_STATE_STORAGE_CONF]: typeof APP_STATE_STORAGE_CONF[K][ExportType] extends true
+ [K in keyof typeof APP_STATE_STORAGE_CONF]: (typeof APP_STATE_STORAGE_CONF)[K][ExportType] extends true
? K
: never;
}[keyof typeof APP_STATE_STORAGE_CONF];
- const stateForExport = {} as { [K in ExportableKeys]?: typeof appState[K] };
+ const stateForExport = {} as { [K in ExportableKeys]?: (typeof appState)[K] };
for (const key of Object.keys(appState) as (keyof typeof appState)[]) {
const propConfig = APP_STATE_STORAGE_CONF[key];
if (propConfig?.[exportType]) {
diff --git a/src/colors.ts b/src/colors.ts
index 905e6cd3f..d42f28781 100644
--- a/src/colors.ts
+++ b/src/colors.ts
@@ -6,12 +6,15 @@ const pick = , K extends readonly (keyof R)[]>(
source: R,
keys: K,
) => {
- return keys.reduce((acc, key: K[number]) => {
- if (key in source) {
- acc[key] = source[key];
- }
- return acc;
- }, {} as Pick) as Pick;
+ return keys.reduce(
+ (acc, key: K[number]) => {
+ if (key in source) {
+ acc[key] = source[key];
+ }
+ return acc;
+ },
+ {} as Pick,
+ ) as Pick;
};
export type ColorPickerColor =
diff --git a/src/components/App.tsx b/src/components/App.tsx
index a975b8928..938810231 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -3080,7 +3080,7 @@ class App extends React.Component {
tool:
| {
type:
- | typeof SHAPES[number]["value"]
+ | (typeof SHAPES)[number]["value"]
| "eraser"
| "hand"
| "frame"
@@ -4770,12 +4770,13 @@ class App extends React.Component {
),
// we need to duplicate because we'll be updating this state
lastCoords: { ...origin },
- originalElements: this.scene
- .getNonDeletedElements()
- .reduce((acc, element) => {
+ originalElements: this.scene.getNonDeletedElements().reduce(
+ (acc, element) => {
acc.set(element.id, deepCopyElement(element));
return acc;
- }, new Map() as PointerDownState["originalElements"]),
+ },
+ new Map() as PointerDownState["originalElements"],
+ ),
resize: {
handleType: false,
isResizing: false,
diff --git a/src/components/ExportDialog.scss b/src/components/ExportDialog.scss
index 3cb31c484..2ee217c99 100644
--- a/src/components/ExportDialog.scss
+++ b/src/components/ExportDialog.scss
@@ -107,7 +107,8 @@
border-radius: 1rem;
background-color: var(--button-color);
- box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.28),
+ box-shadow:
+ 0 3px 5px -1px rgba(0, 0, 0, 0.28),
0 6px 10px 0 rgba(0, 0, 0, 0.14);
font-family: Cascadia;
diff --git a/src/components/LayerUI.scss b/src/components/LayerUI.scss
index b5c88cdff..fbb682993 100644
--- a/src/components/LayerUI.scss
+++ b/src/components/LayerUI.scss
@@ -70,12 +70,16 @@
font-weight: 500;
opacity: 0;
visibility: hidden;
- transition: visibility 0s linear 0s, opacity 0.5s;
+ transition:
+ visibility 0s linear 0s,
+ opacity 0.5s;
&--visible {
opacity: 1;
visibility: visible;
- transition: visibility 0s linear 300ms, opacity 0.5s;
+ transition:
+ visibility 0s linear 300ms,
+ opacity 0.5s;
transition-delay: 0.8s;
}
}
diff --git a/src/css/styles.scss b/src/css/styles.scss
index f1d359d5e..6005710a5 100644
--- a/src/css/styles.scss
+++ b/src/css/styles.scss
@@ -391,13 +391,19 @@
appearance: none;
background-image: var(--dropdown-icon);
background-repeat: no-repeat;
- background-position: right 0.7rem top 50%, 0 0;
+ background-position:
+ right 0.7rem top 50%,
+ 0 0;
:root[dir="rtl"] & {
- background-position: left 0.7rem top 50%, 0 0;
+ background-position:
+ left 0.7rem top 50%,
+ 0 0;
}
- background-size: 0.65em auto, 100%;
+ background-size:
+ 0.65em auto,
+ 100%;
&:focus {
box-shadow: 0 0 0 2px var(--focus-highlight-color);
diff --git a/src/data/blob.ts b/src/data/blob.ts
index 922400303..478993e40 100644
--- a/src/data/blob.ts
+++ b/src/data/blob.ts
@@ -273,7 +273,7 @@ export const resizeImageFile = async (
file: File,
opts: {
/** undefined indicates auto */
- outputType?: typeof MIME_TYPES["jpg"];
+ outputType?: (typeof MIME_TYPES)["jpg"];
maxWidthOrHeight: number;
},
): Promise => {
diff --git a/src/data/transform.ts b/src/data/transform.ts
index bf5411951..22c7a09e2 100644
--- a/src/data/transform.ts
+++ b/src/data/transform.ts
@@ -51,84 +51,81 @@ export type ValidLinearElement = {
textAlign?: TextAlign;
verticalAlign?: VerticalAlign;
} & MarkOptional;
- end?:
+ end?: (
| (
- | (
- | {
- type: Exclude<
- ExcalidrawBindableElement["type"],
- "image" | "text" | "frame" | "embeddable"
- >;
- id?: ExcalidrawGenericElement["id"];
- }
- | {
- id: ExcalidrawGenericElement["id"];
- type?: Exclude<
- ExcalidrawBindableElement["type"],
- "image" | "text" | "frame" | "embeddable"
- >;
- }
- )
- | ((
- | {
- type: "text";
- text: string;
- }
- | {
- type?: "text";
- id: ExcalidrawTextElement["id"];
- text: string;
- }
- ) &
- Partial)
+ | {
+ type: Exclude<
+ ExcalidrawBindableElement["type"],
+ "image" | "text" | "frame" | "embeddable"
+ >;
+ id?: ExcalidrawGenericElement["id"];
+ }
+ | {
+ id: ExcalidrawGenericElement["id"];
+ type?: Exclude<
+ ExcalidrawBindableElement["type"],
+ "image" | "text" | "frame" | "embeddable"
+ >;
+ }
+ )
+ | ((
+ | {
+ type: "text";
+ text: string;
+ }
+ | {
+ type?: "text";
+ id: ExcalidrawTextElement["id"];
+ text: string;
+ }
) &
- MarkOptional;
- start?:
+ Partial)
+ ) &
+ MarkOptional;
+ start?: (
| (
- | (
- | {
- type: Exclude<
- ExcalidrawBindableElement["type"],
- "image" | "text" | "frame" | "embeddable"
- >;
- id?: ExcalidrawGenericElement["id"];
- }
- | {
- id: ExcalidrawGenericElement["id"];
- type?: Exclude<
- ExcalidrawBindableElement["type"],
- "image" | "text" | "frame" | "embeddable"
- >;
- }
- )
- | ((
- | {
- type: "text";
- text: string;
- }
- | {
- type?: "text";
- id: ExcalidrawTextElement["id"];
- text: string;
- }
- ) &
- Partial)
+ | {
+ type: Exclude<
+ ExcalidrawBindableElement["type"],
+ "image" | "text" | "frame" | "embeddable"
+ >;
+ id?: ExcalidrawGenericElement["id"];
+ }
+ | {
+ id: ExcalidrawGenericElement["id"];
+ type?: Exclude<
+ ExcalidrawBindableElement["type"],
+ "image" | "text" | "frame" | "embeddable"
+ >;
+ }
+ )
+ | ((
+ | {
+ type: "text";
+ text: string;
+ }
+ | {
+ type?: "text";
+ id: ExcalidrawTextElement["id"];
+ text: string;
+ }
) &
- MarkOptional;
+ Partial)
+ ) &
+ MarkOptional;
} & Partial;
-export type ValidContainer =
- | {
- type: Exclude;
- id?: ExcalidrawGenericElement["id"];
- label?: {
- text: string;
- fontSize?: number;
- fontFamily?: FontFamilyValues;
- textAlign?: TextAlign;
- verticalAlign?: VerticalAlign;
- } & MarkOptional;
- } & ElementConstructorOpts;
+export type ValidContainer = {
+ type: Exclude;
+ id?: ExcalidrawGenericElement["id"];
+ label?: {
+ text: string;
+ fontSize?: number;
+ fontFamily?: FontFamilyValues;
+ textAlign?: TextAlign;
+ verticalAlign?: VerticalAlign;
+ } & MarkOptional;
+} & ElementConstructorOpts;
export type ExcalidrawElementSkeleton =
| Extract<
diff --git a/src/element/bounds.test.ts b/src/element/bounds.test.ts
index 850c50654..c147f1cd5 100644
--- a/src/element/bounds.test.ts
+++ b/src/element/bounds.test.ts
@@ -31,7 +31,7 @@ const _ce = ({
width: w,
height: h,
angle: a,
- } as ExcalidrawElement);
+ }) as ExcalidrawElement;
describe("getElementAbsoluteCoords", () => {
it("test x1 coordinate", () => {
diff --git a/src/element/linearElementEditor.ts b/src/element/linearElementEditor.ts
index f0dee4faa..0fb23cd73 100644
--- a/src/element/linearElementEditor.ts
+++ b/src/element/linearElementEditor.ts
@@ -404,7 +404,7 @@ export class LinearElementEditor {
static getEditorMidPoints = (
element: NonDeleted,
appState: InteractiveCanvasAppState,
- ): typeof editorMidPointsCache["points"] => {
+ ): (typeof editorMidPointsCache)["points"] => {
const boundText = getBoundTextElement(element);
// Since its not needed outside editor unless 2 pointer lines or bound text
@@ -501,7 +501,7 @@ export class LinearElementEditor {
}
}
let index = 0;
- const midPoints: typeof editorMidPointsCache["points"] =
+ const midPoints: (typeof editorMidPointsCache)["points"] =
LinearElementEditor.getEditorMidPoints(element, appState);
while (index < midPoints.length) {
if (midPoints[index] !== null) {
@@ -609,7 +609,7 @@ export class LinearElementEditor {
hitElement: NonDeleted | null;
linearElementEditor: LinearElementEditor | null;
} {
- const ret: ReturnType = {
+ const ret: ReturnType<(typeof LinearElementEditor)["handlePointerDown"]> = {
didAddPoint: false,
hitElement: null,
linearElementEditor: null,
diff --git a/src/element/resizeElements.ts b/src/element/resizeElements.ts
index 136c70fb8..1cd8dcb24 100644
--- a/src/element/resizeElements.ts
+++ b/src/element/resizeElements.ts
@@ -767,7 +767,7 @@ export const resizeMultipleElements = (
false,
);
- const update: typeof elementsAndUpdates[0]["update"] = {
+ const update: (typeof elementsAndUpdates)[0]["update"] = {
x,
y,
width,
diff --git a/src/element/resizeTest.ts b/src/element/resizeTest.ts
index a3447208f..448e2bf0a 100644
--- a/src/element/resizeTest.ts
+++ b/src/element/resizeTest.ts
@@ -70,20 +70,26 @@ export const getElementWithTransformHandleType = (
zoom: Zoom,
pointerType: PointerType,
) => {
- return elements.reduce((result, element) => {
- if (result) {
- return result;
- }
- const transformHandleType = resizeTest(
- element,
- appState,
- scenePointerX,
- scenePointerY,
- zoom,
- pointerType,
- );
- return transformHandleType ? { element, transformHandleType } : null;
- }, null as { element: NonDeletedExcalidrawElement; transformHandleType: MaybeTransformHandleType } | null);
+ return elements.reduce(
+ (result, element) => {
+ if (result) {
+ return result;
+ }
+ const transformHandleType = resizeTest(
+ element,
+ appState,
+ scenePointerX,
+ scenePointerY,
+ zoom,
+ pointerType,
+ );
+ return transformHandleType ? { element, transformHandleType } : null;
+ },
+ null as {
+ element: NonDeletedExcalidrawElement;
+ transformHandleType: MaybeTransformHandleType;
+ } | null,
+ );
};
export const getTransformHandleTypeFromCoords = (
diff --git a/src/element/types.ts b/src/element/types.ts
index e8d71cae5..9e7ebb50c 100644
--- a/src/element/types.ts
+++ b/src/element/types.ts
@@ -11,18 +11,18 @@ import { MarkNonNullable, ValueOf } from "../utility-types";
export type ChartType = "bar" | "line";
export type FillStyle = "hachure" | "cross-hatch" | "solid" | "zigzag";
export type FontFamilyKeys = keyof typeof FONT_FAMILY;
-export type FontFamilyValues = typeof FONT_FAMILY[FontFamilyKeys];
-export type Theme = typeof THEME[keyof typeof THEME];
+export type FontFamilyValues = (typeof FONT_FAMILY)[FontFamilyKeys];
+export type Theme = (typeof THEME)[keyof typeof THEME];
export type FontString = string & { _brand: "fontString" };
export type GroupId = string;
export type PointerType = "mouse" | "pen" | "touch";
export type StrokeRoundness = "round" | "sharp";
export type RoundnessType = ValueOf;
export type StrokeStyle = "solid" | "dashed" | "dotted";
-export type TextAlign = typeof TEXT_ALIGN[keyof typeof TEXT_ALIGN];
+export type TextAlign = (typeof TEXT_ALIGN)[keyof typeof TEXT_ALIGN];
type VerticalAlignKeys = keyof typeof VERTICAL_ALIGN;
-export type VerticalAlign = typeof VERTICAL_ALIGN[VerticalAlignKeys];
+export type VerticalAlign = (typeof VERTICAL_ALIGN)[VerticalAlignKeys];
type _ExcalidrawElementBase = Readonly<{
id: string;
diff --git a/src/history.ts b/src/history.ts
index d102a7ecc..0a5ce4cf7 100644
--- a/src/history.ts
+++ b/src/history.ts
@@ -104,35 +104,38 @@ class History {
): DehydratedHistoryEntry =>
this.dehydrateHistoryEntry({
appState: clearAppStatePropertiesForHistory(appState),
- elements: elements.reduce((elements, element) => {
- if (
- isLinearElement(element) &&
- appState.multiElement &&
- appState.multiElement.id === element.id
- ) {
- // don't store multi-point arrow if still has only one point
+ elements: elements.reduce(
+ (elements, element) => {
if (
+ isLinearElement(element) &&
appState.multiElement &&
- appState.multiElement.id === element.id &&
- element.points.length < 2
+ appState.multiElement.id === element.id
) {
- return elements;
- }
+ // don't store multi-point arrow if still has only one point
+ if (
+ appState.multiElement &&
+ appState.multiElement.id === element.id &&
+ element.points.length < 2
+ ) {
+ return elements;
+ }
- elements.push({
- ...element,
- // don't store last point if not committed
- points:
- element.lastCommittedPoint !==
- element.points[element.points.length - 1]
- ? element.points.slice(0, -1)
- : element.points,
- });
- } else {
- elements.push(element);
- }
- return elements;
- }, [] as Mutable),
+ elements.push({
+ ...element,
+ // don't store last point if not committed
+ points:
+ element.lastCommittedPoint !==
+ element.points[element.points.length - 1]
+ ? element.points.slice(0, -1)
+ : element.points,
+ });
+ } else {
+ elements.push(element);
+ }
+ return elements;
+ },
+ [] as Mutable,
+ ),
});
shouldCreateEntry(nextEntry: HistoryEntry): boolean {
diff --git a/src/packages/excalidraw/example/public/index.html b/src/packages/excalidraw/example/public/index.html
index 7f4ed2494..27f32cdc7 100644
--- a/src/packages/excalidraw/example/public/index.html
+++ b/src/packages/excalidraw/example/public/index.html
@@ -1,4 +1,4 @@
-
+
diff --git a/src/scene/Scene.ts b/src/scene/Scene.ts
index e64da78fc..513f56150 100644
--- a/src/scene/Scene.ts
+++ b/src/scene/Scene.ts
@@ -36,7 +36,7 @@ const hashSelectionOpts = (
type _ = Assert<
SameType<
Required,
- Pick, typeof keys[number]>
+ Pick, (typeof keys)[number]>
>
>;
diff --git a/src/scene/Shape.ts b/src/scene/Shape.ts
index f43a1260d..58d97d747 100644
--- a/src/scene/Shape.ts
+++ b/src/scene/Shape.ts
@@ -167,20 +167,20 @@ export const _generateElementShape = (
rightX - verticalRadius
} ${rightY - horizontalRadius}
C ${rightX} ${rightY}, ${rightX} ${rightY}, ${
- rightX - verticalRadius
- } ${rightY + horizontalRadius}
+ rightX - verticalRadius
+ } ${rightY + horizontalRadius}
L ${bottomX + verticalRadius} ${bottomY - horizontalRadius}
C ${bottomX} ${bottomY}, ${bottomX} ${bottomY}, ${
- bottomX - verticalRadius
- } ${bottomY - horizontalRadius}
+ bottomX - verticalRadius
+ } ${bottomY - horizontalRadius}
L ${leftX + verticalRadius} ${leftY + horizontalRadius}
C ${leftX} ${leftY}, ${leftX} ${leftY}, ${leftX + verticalRadius} ${
- leftY - horizontalRadius
- }
+ leftY - horizontalRadius
+ }
L ${topX - verticalRadius} ${topY + horizontalRadius}
C ${topX} ${topY}, ${topX} ${topY}, ${topX + verticalRadius} ${
- topY + horizontalRadius
- }`,
+ topY + horizontalRadius
+ }`,
generateRoughOptions(element, true),
);
} else {
diff --git a/src/scene/export.ts b/src/scene/export.ts
index ca838f053..1508114f7 100644
--- a/src/scene/export.ts
+++ b/src/scene/export.ts
@@ -167,8 +167,8 @@ export const exportToSvg = async (
exportingFrameClipPath = `
@@ -235,10 +235,13 @@ const getCanvasSize = (
if (!isExportingWholeCanvas || onlyExportingSingleFrame) {
const frames = elements.filter((element) => element.type === "frame");
- const exportedFrameIds = frames.reduce((acc, frame) => {
- acc[frame.id] = true;
- return acc;
- }, {} as Record);
+ const exportedFrameIds = frames.reduce(
+ (acc, frame) => {
+ acc[frame.id] = true;
+ return acc;
+ },
+ {} as Record,
+ );
// elements in a frame do not affect the canvas size if we're not exporting
// the whole canvas
diff --git a/src/tests/helpers/api.ts b/src/tests/helpers/api.ts
index 1b1943de0..30e4ba1d2 100644
--- a/src/tests/helpers/api.ts
+++ b/src/tests/helpers/api.ts
@@ -34,10 +34,13 @@ const { h } = window;
export class API {
static setSelectedElements = (elements: ExcalidrawElement[]) => {
h.setState({
- selectedElementIds: elements.reduce((acc, element) => {
- acc[element.id] = true;
- return acc;
- }, {} as Record),
+ selectedElementIds: elements.reduce(
+ (acc, element) => {
+ acc[element.id] = true;
+ return acc;
+ },
+ {} as Record,
+ ),
});
};
diff --git a/src/types.ts b/src/types.ts
index bc7770866..daace5b69 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -88,7 +88,7 @@ export type BinaryFiles = Record;
export type LastActiveTool =
| {
type:
- | typeof SHAPES[number]["value"]
+ | (typeof SHAPES)[number]["value"]
| "eraser"
| "hand"
| "frame"
@@ -196,7 +196,7 @@ export type AppState = {
} & (
| {
type:
- | typeof SHAPES[number]["value"]
+ | (typeof SHAPES)[number]["value"]
| "eraser"
| "hand"
| "frame"
diff --git a/src/utils.ts b/src/utils.ts
index 8b142744a..74737a5fd 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -372,7 +372,7 @@ export const updateActiveTool = (
data: (
| {
type:
- | typeof SHAPES[number]["value"]
+ | (typeof SHAPES)[number]["value"]
| "eraser"
| "hand"
| "frame"
diff --git a/src/zindex.ts b/src/zindex.ts
index a1f051c54..3c20868c1 100644
--- a/src/zindex.ts
+++ b/src/zindex.ts
@@ -188,11 +188,14 @@ const getTargetElementsMap = (
elements: readonly T[],
indices: number[],
) => {
- return indices.reduce((acc, index) => {
- const element = elements[index];
- acc[element.id] = element;
- return acc;
- }, {} as Record);
+ return indices.reduce(
+ (acc, index) => {
+ const element = elements[index];
+ acc[element.id] = element;
+ return acc;
+ },
+ {} as Record,
+ );
};
const _shiftElements = (