From ee68af0fd30113ddade142ee49bbd7c6572d3c88 Mon Sep 17 00:00:00 2001 From: Lipis Date: Fri, 24 Jan 2020 12:04:54 +0200 Subject: [PATCH] Set Trailing Cmma to (#525) --- .lintstagedrc.js | 2 +- .prettierrc | 4 +- scripts/build-node.js | 6 +- src/actions/actionCanvas.tsx | 6 +- src/actions/actionDeleteSelected.tsx | 4 +- src/actions/actionExport.tsx | 10 +- src/actions/actionProperties.tsx | 78 ++++++------ src/actions/actionSelectAll.ts | 4 +- src/actions/actionStyles.ts | 8 +- src/actions/actionZindex.tsx | 18 +-- src/actions/index.ts | 8 +- src/actions/manager.tsx | 16 +-- src/actions/types.ts | 10 +- src/appState.ts | 2 +- src/components/ButtonSelect.tsx | 2 +- src/components/ColorPicker.tsx | 14 +-- src/components/ContextMenu.tsx | 4 +- src/components/ExportDialog.tsx | 12 +- src/components/FixedSideContainer.tsx | 2 +- src/components/LanguageList.tsx | 2 +- src/components/LockIcon.tsx | 2 +- src/components/Modal.tsx | 2 +- src/components/Popover.tsx | 2 +- src/components/Stack.tsx | 6 +- src/element/bounds.test.ts | 10 +- src/element/bounds.ts | 2 +- src/element/collision.ts | 6 +- src/element/handlerRectangles.ts | 20 +-- src/element/index.ts | 4 +- src/element/newElement.ts | 8 +- src/element/resizeTest.ts | 6 +- src/element/sizeHelpers.ts | 4 +- src/element/textWysiwyg.tsx | 4 +- src/element/typeChecks.ts | 2 +- src/history.ts | 6 +- src/i18n.ts | 4 +- src/index-node.ts | 12 +- src/index.tsx | 170 +++++++++++++------------- src/keys.ts | 2 +- src/math.ts | 6 +- src/renderer/renderElement.ts | 26 ++-- src/renderer/renderScene.ts | 24 ++-- src/renderer/roundRect.ts | 4 +- src/scene/comparisons.ts | 8 +- src/scene/data.ts | 42 +++---- src/scene/getExportCanvasPreview.ts | 12 +- src/scene/index.ts | 6 +- src/scene/scrollbars.ts | 26 ++-- src/scene/selection.ts | 12 +- src/shapes.tsx | 18 +-- src/utils.ts | 4 +- src/zindex.test.ts | 26 ++-- src/zindex.ts | 4 +- 53 files changed, 352 insertions(+), 350 deletions(-) diff --git a/.lintstagedrc.js b/.lintstagedrc.js index 8c2d6a96..8dbc497f 100644 --- a/.lintstagedrc.js +++ b/.lintstagedrc.js @@ -11,5 +11,5 @@ module.exports = { files.filter(file => !cli.isPathIgnored(file)).join(" ") ); }, - "*.{js,css,scss,json,md,ts,tsx,html,yml}": ["prettier --write"] + "*.{js,css,scss,json,md,ts,tsx,html,yml}": ["prettier --write"], }; diff --git a/.prettierrc b/.prettierrc index 0967ef42..bf357fbb 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1 +1,3 @@ -{} +{ + "trailingComma": "all" +} diff --git a/scripts/build-node.js b/scripts/build-node.js index 3a4a4155..1c43e76d 100755 --- a/scripts/build-node.js +++ b/scripts/build-node.js @@ -17,8 +17,8 @@ var config = defaults.__get__("config"); config.optimization.runtimeChunk = false; config.optimization.splitChunks = { cacheGroups: { - default: false - } + default: false, + }, }; // Set the filename to be deterministic config.output.filename = "static/js/build-node.js"; @@ -33,7 +33,7 @@ config.externals = function(context, request, callback) { if (/\.node$/.test(request)) { return callback( null, - "commonjs ../../../node_modules/canvas/build/Release/canvas.node" + "commonjs ../../../node_modules/canvas/build/Release/canvas.node", ); } callback(); diff --git a/src/actions/actionCanvas.tsx b/src/actions/actionCanvas.tsx index eb2bb72d..c1c31a0d 100644 --- a/src/actions/actionCanvas.tsx +++ b/src/actions/actionCanvas.tsx @@ -20,7 +20,7 @@ export const actionChangeViewBackgroundColor: Action = { /> ); - } + }, }; export const actionClearCanvas: Action = { @@ -28,7 +28,7 @@ export const actionClearCanvas: Action = { perform: () => { return { elements: [], - appState: getDefaultAppState() + appState: getDefaultAppState(), }; }, PanelComponent: ({ updateData, t }) => ( @@ -47,5 +47,5 @@ export const actionClearCanvas: Action = { } }} /> - ) + ), }; diff --git a/src/actions/actionDeleteSelected.tsx b/src/actions/actionDeleteSelected.tsx index 22ad3cb9..5d58c9fb 100644 --- a/src/actions/actionDeleteSelected.tsx +++ b/src/actions/actionDeleteSelected.tsx @@ -6,10 +6,10 @@ export const actionDeleteSelected: Action = { name: "deleteSelectedElements", perform: elements => { return { - elements: deleteSelectedElements(elements) + elements: deleteSelectedElements(elements), }; }, contextItemLabel: "labels.delete", contextMenuOrder: 3, - keyTest: event => event.key === KEYS.BACKSPACE || event.key === KEYS.DELETE + keyTest: event => event.key === KEYS.BACKSPACE || event.key === KEYS.DELETE, }; diff --git a/src/actions/actionExport.tsx b/src/actions/actionExport.tsx index 74583b16..db56021c 100644 --- a/src/actions/actionExport.tsx +++ b/src/actions/actionExport.tsx @@ -15,7 +15,7 @@ export const actionChangeProjectName: Action = { value={appState.name || "Unnamed"} onChange={(name: string) => updateData(name)} /> - ) + ), }; export const actionChangeExportBackground: Action = { @@ -34,7 +34,7 @@ export const actionChangeExportBackground: Action = { />{" "} {t("labels.withBackground")} - ) + ), }; export const actionSaveScene: Action = { @@ -51,7 +51,7 @@ export const actionSaveScene: Action = { aria-label={t("buttons.save")} onClick={() => updateData(null)} /> - ) + ), }; export const actionLoadScene: Action = { @@ -59,7 +59,7 @@ export const actionLoadScene: Action = { perform: ( elements, appState, - { elements: loadedElements, appState: loadedAppState } + { elements: loadedElements, appState: loadedAppState }, ) => { return { elements: loadedElements, appState: loadedAppState }; }, @@ -77,5 +77,5 @@ export const actionLoadScene: Action = { .catch(err => console.error(err)); }} /> - ) + ), }; diff --git a/src/actions/actionProperties.tsx b/src/actions/actionProperties.tsx index 49e3e97b..7329e654 100644 --- a/src/actions/actionProperties.tsx +++ b/src/actions/actionProperties.tsx @@ -9,7 +9,7 @@ import { AppState } from "../../src/types"; const changeProperty = ( elements: readonly ExcalidrawElement[], - callback: (element: ExcalidrawElement) => ExcalidrawElement + callback: (element: ExcalidrawElement) => ExcalidrawElement, ) => { return elements.map(element => { if (element.isSelected) { @@ -23,7 +23,7 @@ const getFormValue = function( editingElement: AppState["editingElement"], elements: readonly ExcalidrawElement[], getAttribute: (element: ExcalidrawElement) => T, - defaultValue?: T + defaultValue?: T, ): T | null { return ( (editingElement && getAttribute(editingElement)) ?? @@ -40,9 +40,9 @@ export const actionChangeStrokeColor: Action = { elements: changeProperty(elements, el => ({ ...el, shape: null, - strokeColor: value + strokeColor: value, })), - appState: { ...appState, currentItemStrokeColor: value } + appState: { ...appState, currentItemStrokeColor: value }, }; }, PanelComponent: ({ elements, appState, updateData, t }) => ( @@ -54,12 +54,12 @@ export const actionChangeStrokeColor: Action = { appState.editingElement, elements, element => element.strokeColor, - appState.currentItemStrokeColor + appState.currentItemStrokeColor, )} onChange={updateData} /> - ) + ), }; export const actionChangeBackgroundColor: Action = { @@ -69,9 +69,9 @@ export const actionChangeBackgroundColor: Action = { elements: changeProperty(elements, el => ({ ...el, shape: null, - backgroundColor: value + backgroundColor: value, })), - appState: { ...appState, currentItemBackgroundColor: value } + appState: { ...appState, currentItemBackgroundColor: value }, }; }, PanelComponent: ({ elements, appState, updateData, t }) => ( @@ -83,12 +83,12 @@ export const actionChangeBackgroundColor: Action = { appState.editingElement, elements, element => element.backgroundColor, - appState.currentItemBackgroundColor + appState.currentItemBackgroundColor, )} onChange={updateData} /> - ) + ), }; export const actionChangeFillStyle: Action = { @@ -98,8 +98,8 @@ export const actionChangeFillStyle: Action = { elements: changeProperty(elements, el => ({ ...el, shape: null, - fillStyle: value - })) + fillStyle: value, + })), }; }, PanelComponent: ({ elements, appState, updateData, t }) => ( @@ -109,19 +109,19 @@ export const actionChangeFillStyle: Action = { options={[ { value: "solid", text: t("labels.solid") }, { value: "hachure", text: t("labels.hachure") }, - { value: "cross-hatch", text: t("labels.crossHatch") } + { value: "cross-hatch", text: t("labels.crossHatch") }, ]} value={getFormValue( appState.editingElement, elements, - element => element.fillStyle + element => element.fillStyle, )} onChange={value => { updateData(value); }} /> - ) + ), }; export const actionChangeStrokeWidth: Action = { @@ -131,8 +131,8 @@ export const actionChangeStrokeWidth: Action = { elements: changeProperty(elements, el => ({ ...el, shape: null, - strokeWidth: value - })) + strokeWidth: value, + })), }; }, PanelComponent: ({ elements, appState, updateData, t }) => ( @@ -142,17 +142,17 @@ export const actionChangeStrokeWidth: Action = { options={[ { value: 1, text: t("labels.thin") }, { value: 2, text: t("labels.bold") }, - { value: 4, text: t("labels.extraBold") } + { value: 4, text: t("labels.extraBold") }, ]} value={getFormValue( appState.editingElement, elements, - element => element.strokeWidth + element => element.strokeWidth, )} onChange={value => updateData(value)} /> - ) + ), }; export const actionChangeSloppiness: Action = { @@ -162,8 +162,8 @@ export const actionChangeSloppiness: Action = { elements: changeProperty(elements, el => ({ ...el, shape: null, - roughness: value - })) + roughness: value, + })), }; }, PanelComponent: ({ elements, appState, updateData, t }) => ( @@ -173,17 +173,17 @@ export const actionChangeSloppiness: Action = { options={[ { value: 0, text: t("labels.architect") }, { value: 1, text: t("labels.artist") }, - { value: 3, text: t("labels.cartoonist") } + { value: 3, text: t("labels.cartoonist") }, ]} value={getFormValue( appState.editingElement, elements, - element => element.roughness + element => element.roughness, )} onChange={value => updateData(value)} /> - ) + ), }; export const actionChangeOpacity: Action = { @@ -193,8 +193,8 @@ export const actionChangeOpacity: Action = { elements: changeProperty(elements, el => ({ ...el, shape: null, - opacity: value - })) + opacity: value, + })), }; }, PanelComponent: ({ elements, appState, updateData, t }) => ( @@ -210,12 +210,12 @@ export const actionChangeOpacity: Action = { appState.editingElement, elements, element => element.opacity, - 100 /* default opacity */ + 100 /* default opacity */, ) ?? undefined } /> - ) + ), }; export const actionChangeFontSize: Action = { @@ -227,14 +227,14 @@ export const actionChangeFontSize: Action = { const element: ExcalidrawTextElement = { ...el, shape: null, - font: `${value}px ${el.font.split("px ")[1]}` + font: `${value}px ${el.font.split("px ")[1]}`, }; redrawTextBoundingBox(element); return element; } return el; - }) + }), }; }, PanelComponent: ({ elements, appState, updateData, t }) => ( @@ -245,17 +245,17 @@ export const actionChangeFontSize: Action = { { value: 16, text: t("labels.small") }, { value: 20, text: t("labels.medium") }, { value: 28, text: t("labels.large") }, - { value: 36, text: t("labels.veryLarge") } + { value: 36, text: t("labels.veryLarge") }, ]} value={getFormValue( appState.editingElement, elements, - element => isTextElement(element) && +element.font.split("px ")[0] + element => isTextElement(element) && +element.font.split("px ")[0], )} onChange={value => updateData(value)} /> - ) + ), }; export const actionChangeFontFamily: Action = { @@ -267,14 +267,14 @@ export const actionChangeFontFamily: Action = { const element: ExcalidrawTextElement = { ...el, shape: null, - font: `${el.font.split("px ")[0]}px ${value}` + font: `${el.font.split("px ")[0]}px ${value}`, }; redrawTextBoundingBox(element); return element; } return el; - }) + }), }; }, PanelComponent: ({ elements, appState, updateData, t }) => ( @@ -284,15 +284,15 @@ export const actionChangeFontFamily: Action = { options={[ { value: "Virgil", text: t("labels.handDrawn") }, { value: "Helvetica", text: t("labels.normal") }, - { value: "Cascadia", text: t("labels.code") } + { value: "Cascadia", text: t("labels.code") }, ]} value={getFormValue( appState.editingElement, elements, - element => isTextElement(element) && element.font.split("px ")[1] + element => isTextElement(element) && element.font.split("px ")[1], )} onChange={value => updateData(value)} /> - ) + ), }; diff --git a/src/actions/actionSelectAll.ts b/src/actions/actionSelectAll.ts index 3aa28fd1..8342ed43 100644 --- a/src/actions/actionSelectAll.ts +++ b/src/actions/actionSelectAll.ts @@ -5,9 +5,9 @@ export const actionSelectAll: Action = { name: "selectAll", perform: elements => { return { - elements: elements.map(elem => ({ ...elem, isSelected: true })) + elements: elements.map(elem => ({ ...elem, isSelected: true })), }; }, contextItemLabel: "labels.selectAll", - keyTest: event => event[KEYS.META] && event.code === "KeyA" + keyTest: event => event[KEYS.META] && event.code === "KeyA", }; diff --git a/src/actions/actionStyles.ts b/src/actions/actionStyles.ts index c7cf2045..a0e79e33 100644 --- a/src/actions/actionStyles.ts +++ b/src/actions/actionStyles.ts @@ -15,7 +15,7 @@ export const actionCopyStyles: Action = { }, contextItemLabel: "labels.copyStyles", keyTest: event => event[KEYS.META] && event.shiftKey && event.code === "KeyC", - contextMenuOrder: 0 + contextMenuOrder: 0, }; export const actionPasteStyles: Action = { @@ -33,7 +33,7 @@ export const actionPasteStyles: Action = { strokeColor: pastedElement?.strokeColor, fillStyle: pastedElement?.fillStyle, opacity: pastedElement?.opacity, - roughness: pastedElement?.roughness + roughness: pastedElement?.roughness, }; if (isTextElement(newElement)) { newElement.font = pastedElement?.font; @@ -42,10 +42,10 @@ export const actionPasteStyles: Action = { return newElement; } return element; - }) + }), }; }, contextItemLabel: "labels.pasteStyles", keyTest: event => event[KEYS.META] && event.shiftKey && event.code === "KeyV", - contextMenuOrder: 1 + contextMenuOrder: 1, }; diff --git a/src/actions/actionZindex.tsx b/src/actions/actionZindex.tsx index 36359029..d877986c 100644 --- a/src/actions/actionZindex.tsx +++ b/src/actions/actionZindex.tsx @@ -3,7 +3,7 @@ import { moveOneLeft, moveOneRight, moveAllLeft, - moveAllRight + moveAllRight, } from "../zindex"; import { getSelectedIndices } from "../scene"; import { KEYS } from "../keys"; @@ -13,13 +13,13 @@ export const actionSendBackward: Action = { perform: (elements, appState) => { return { elements: moveOneLeft([...elements], getSelectedIndices(elements)), - appState + appState, }; }, contextItemLabel: "labels.sendBackward", keyPriority: 40, keyTest: event => - event[KEYS.META] && event.shiftKey && event.altKey && event.code === "KeyB" + event[KEYS.META] && event.shiftKey && event.altKey && event.code === "KeyB", }; export const actionBringForward: Action = { @@ -27,13 +27,13 @@ export const actionBringForward: Action = { perform: (elements, appState) => { return { elements: moveOneRight([...elements], getSelectedIndices(elements)), - appState + appState, }; }, contextItemLabel: "labels.bringForward", keyPriority: 40, keyTest: event => - event[KEYS.META] && event.shiftKey && event.altKey && event.code === "KeyF" + event[KEYS.META] && event.shiftKey && event.altKey && event.code === "KeyF", }; export const actionSendToBack: Action = { @@ -41,11 +41,11 @@ export const actionSendToBack: Action = { perform: (elements, appState) => { return { elements: moveAllLeft([...elements], getSelectedIndices(elements)), - appState + appState, }; }, contextItemLabel: "labels.sendToBack", - keyTest: event => event[KEYS.META] && event.shiftKey && event.code === "KeyB" + keyTest: event => event[KEYS.META] && event.shiftKey && event.code === "KeyB", }; export const actionBringToFront: Action = { @@ -53,9 +53,9 @@ export const actionBringToFront: Action = { perform: (elements, appState) => { return { elements: moveAllRight([...elements], getSelectedIndices(elements)), - appState + appState, }; }, contextItemLabel: "labels.bringToFront", - keyTest: event => event[KEYS.META] && event.shiftKey && event.code === "KeyF" + keyTest: event => event[KEYS.META] && event.shiftKey && event.code === "KeyF", }; diff --git a/src/actions/index.ts b/src/actions/index.ts index 23a2c67b..0b60a0fd 100644 --- a/src/actions/index.ts +++ b/src/actions/index.ts @@ -4,7 +4,7 @@ export { actionBringForward, actionBringToFront, actionSendBackward, - actionSendToBack + actionSendToBack, } from "./actionZindex"; export { actionSelectAll } from "./actionSelectAll"; export { @@ -15,19 +15,19 @@ export { actionChangeSloppiness, actionChangeOpacity, actionChangeFontSize, - actionChangeFontFamily + actionChangeFontFamily, } from "./actionProperties"; export { actionChangeViewBackgroundColor, - actionClearCanvas + actionClearCanvas, } from "./actionCanvas"; export { actionChangeProjectName, actionChangeExportBackground, actionSaveScene, - actionLoadScene + actionLoadScene, } from "./actionExport"; export { actionCopyStyles, actionPasteStyles } from "./actionStyles"; diff --git a/src/actions/manager.tsx b/src/actions/manager.tsx index 859d74b7..481dc70b 100644 --- a/src/actions/manager.tsx +++ b/src/actions/manager.tsx @@ -3,7 +3,7 @@ import { Action, ActionsManagerInterface, UpdaterFn, - ActionFilterFn + ActionFilterFn, } from "./types"; import { ExcalidrawElement } from "../element/types"; import { AppState } from "../types"; @@ -17,7 +17,7 @@ export class ActionManager implements ActionsManagerInterface { | null = null; setUpdater( - updater: (elements: ExcalidrawElement[], appState: AppState) => void + updater: (elements: ExcalidrawElement[], appState: AppState) => void, ) { this.updater = updater; } @@ -29,12 +29,12 @@ export class ActionManager implements ActionsManagerInterface { handleKeyDown( event: KeyboardEvent, elements: readonly ExcalidrawElement[], - appState: AppState + appState: AppState, ) { const data = Object.values(this.actions) .sort((a, b) => (b.keyPriority || 0) - (a.keyPriority || 0)) .filter( - action => action.keyTest && action.keyTest(event, elements, appState) + action => action.keyTest && action.keyTest(event, elements, appState), ); if (data.length === 0) return {}; @@ -48,7 +48,7 @@ export class ActionManager implements ActionsManagerInterface { appState: AppState, updater: UpdaterFn, actionFilter: ActionFilterFn = action => action, - t?: TFunction + t?: TFunction, ) { return Object.values(this.actions) .filter(actionFilter) @@ -56,7 +56,7 @@ export class ActionManager implements ActionsManagerInterface { .sort( (a, b) => (a.contextMenuOrder !== undefined ? a.contextMenuOrder : 999) - - (b.contextMenuOrder !== undefined ? b.contextMenuOrder : 999) + (b.contextMenuOrder !== undefined ? b.contextMenuOrder : 999), ) .map(action => ({ label: @@ -65,7 +65,7 @@ export class ActionManager implements ActionsManagerInterface { : action.contextItemLabel!, action: () => { updater(action.perform(elements, appState, null)); - } + }, })); } @@ -74,7 +74,7 @@ export class ActionManager implements ActionsManagerInterface { elements: readonly ExcalidrawElement[], appState: AppState, updater: UpdaterFn, - t: TFunction + t: TFunction, ) { if (this.actions[name] && "PanelComponent" in this.actions[name]) { const action = this.actions[name]; diff --git a/src/actions/types.ts b/src/actions/types.ts index 877b45d2..07e2855a 100644 --- a/src/actions/types.ts +++ b/src/actions/types.ts @@ -11,7 +11,7 @@ export type ActionResult = { type ActionFn = ( elements: readonly ExcalidrawElement[], appState: AppState, - formData: any + formData: any, ) => ActionResult; export type UpdaterFn = (res: ActionResult) => void; @@ -30,7 +30,7 @@ export interface Action { keyTest?: ( event: KeyboardEvent, elements?: readonly ExcalidrawElement[], - appState?: AppState + appState?: AppState, ) => boolean; contextItemLabel?: string; contextMenuOrder?: number; @@ -44,19 +44,19 @@ export interface ActionsManagerInterface { handleKeyDown: ( event: KeyboardEvent, elements: readonly ExcalidrawElement[], - appState: AppState + appState: AppState, ) => ActionResult | {}; getContextMenuItems: ( elements: readonly ExcalidrawElement[], appState: AppState, updater: UpdaterFn, - actionFilter: ActionFilterFn + actionFilter: ActionFilterFn, ) => { label: string; action: () => void }[]; renderAction: ( name: string, elements: readonly ExcalidrawElement[], appState: AppState, updater: UpdaterFn, - t: TFunction + t: TFunction, ) => React.ReactElement | null; } diff --git a/src/appState.ts b/src/appState.ts index 7ad0e7ad..08964af9 100644 --- a/src/appState.ts +++ b/src/appState.ts @@ -19,6 +19,6 @@ export function getDefaultAppState(): AppState { scrollY: 0, cursorX: 0, cursorY: 0, - name: DEFAULT_PROJECT_NAME + name: DEFAULT_PROJECT_NAME, }; } diff --git a/src/components/ButtonSelect.tsx b/src/components/ButtonSelect.tsx index ec9b55f0..a345b8b0 100644 --- a/src/components/ButtonSelect.tsx +++ b/src/components/ButtonSelect.tsx @@ -3,7 +3,7 @@ import React from "react"; export function ButtonSelect({ options, value, - onChange + onChange, }: { options: { value: T; text: string }[]; value: T | null; diff --git a/src/components/ColorPicker.tsx b/src/components/ColorPicker.tsx index badf851c..2885203c 100644 --- a/src/components/ColorPicker.tsx +++ b/src/components/ColorPicker.tsx @@ -9,7 +9,7 @@ import "./ColorPicker.css"; const Picker = function({ colors, color, - onChange + onChange, }: { colors: string[]; color: string | null; @@ -53,7 +53,7 @@ const Picker = function({ function ColorInput({ color, - onChange + onChange, }: { color: string | null; onChange: (color: string) => void; @@ -90,7 +90,7 @@ function ColorInput({ export function ColorPicker({ type, color, - onChange + onChange, }: { type: "canvasBackground" | "elementBackground" | "elementStroke"; color: string | null; @@ -149,7 +149,7 @@ const colors = { "#ebfbee", "#f4fce3", "#fff9db", - "#fff4e6" + "#fff4e6", ], // Shade 6 elementBackground: [ @@ -167,7 +167,7 @@ const colors = { "#40c057", "#82c91e", "#fab005", - "#fd7e14" + "#fd7e14", ], // Shade 9 elementStroke: [ @@ -185,6 +185,6 @@ const colors = { "#2b8a3e", "#5c940d", "#e67700", - "#d9480f" - ] + "#d9480f", + ], }; diff --git a/src/components/ContextMenu.tsx b/src/components/ContextMenu.tsx index 8053e226..4d0e2212 100644 --- a/src/components/ContextMenu.tsx +++ b/src/components/ContextMenu.tsx @@ -83,8 +83,8 @@ export default { options={options} onCloseRequest={handleClose} />, - getContextMenuNode() + getContextMenuNode(), ); } - } + }, }; diff --git a/src/components/ExportDialog.tsx b/src/components/ExportDialog.tsx index fec4cc00..d64bc49c 100644 --- a/src/components/ExportDialog.tsx +++ b/src/components/ExportDialog.tsx @@ -25,7 +25,7 @@ const defaultScale = scales.includes(devicePixelRatio) ? devicePixelRatio : 1; type ExportCB = ( elements: readonly ExcalidrawElement[], - scale?: number + scale?: number, ) => void; export function ExportDialog({ @@ -36,7 +36,7 @@ export function ExportDialog({ syncActionResult, onExportToPng, onExportToClipboard, - onExportToBackend + onExportToBackend, }: { appState: AppState; elements: readonly ExcalidrawElement[]; @@ -69,7 +69,7 @@ export function ExportDialog({ exportBackground, viewBackgroundColor, exportPadding, - scale + scale, }); previewNode?.appendChild(canvas); return () => { @@ -81,7 +81,7 @@ export function ExportDialog({ exportBackground, exportPadding, viewBackgroundColor, - scale + scale, ]); function handleClose() { @@ -141,7 +141,7 @@ export function ExportDialog({ elements, appState, syncActionResult, - t + t, )}
@@ -165,7 +165,7 @@ export function ExportDialog({ elements, appState, syncActionResult, - t + t, )} {someElementIsSelected && (
diff --git a/src/components/FixedSideContainer.tsx b/src/components/FixedSideContainer.tsx index c3349426..8a49de51 100644 --- a/src/components/FixedSideContainer.tsx +++ b/src/components/FixedSideContainer.tsx @@ -9,7 +9,7 @@ type FixedSideContainerProps = { export function FixedSideContainer({ children, - side + side, }: FixedSideContainerProps) { return (
diff --git a/src/components/LanguageList.tsx b/src/components/LanguageList.tsx index e3635b14..d9c8ac66 100644 --- a/src/components/LanguageList.tsx +++ b/src/components/LanguageList.tsx @@ -3,7 +3,7 @@ import React from "react"; export function LanguageList({ onClick, languages, - currentLanguage + currentLanguage, }: { languages: { lng: string; label: string }[]; onClick: (value: string) => void; diff --git a/src/components/LockIcon.tsx b/src/components/LockIcon.tsx index 7a3977c6..504417ae 100644 --- a/src/components/LockIcon.tsx +++ b/src/components/LockIcon.tsx @@ -35,7 +35,7 @@ const ICONS = { > - ) + ), }; export function LockIcon(props: LockIconProps) { diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index a9de78cf..5b932ff6 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -16,7 +16,7 @@ export function Modal(props: { {props.children}
, - modalRoot + modalRoot, ); } diff --git a/src/components/Popover.tsx b/src/components/Popover.tsx index 1bd7e9ff..7b76af14 100644 --- a/src/components/Popover.tsx +++ b/src/components/Popover.tsx @@ -14,7 +14,7 @@ export function Popover({ left, top, onCloseRequest, - fitInViewport = false + fitInViewport = false, }: Props) { const popoverRef = useRef(null); diff --git a/src/components/Stack.tsx b/src/components/Stack.tsx index 331c8edc..42a9e21a 100644 --- a/src/components/Stack.tsx +++ b/src/components/Stack.tsx @@ -17,7 +17,7 @@ function RowStack({ children, gap, align, justifyContent }: StackProps) { { "--gap": gap, alignItems: align, - justifyContent + justifyContent, } as React.CSSProperties } > @@ -34,7 +34,7 @@ function ColStack({ children, gap, align, justifyContent }: StackProps) { { "--gap": gap, justifyItems: align, - justifyContent + justifyContent, } as React.CSSProperties } > @@ -45,5 +45,5 @@ function ColStack({ children, gap, align, justifyContent }: StackProps) { export default { Row: RowStack, - Col: ColStack + Col: ColStack, }; diff --git a/src/element/bounds.test.ts b/src/element/bounds.test.ts index 6ed9f213..4c79e6d3 100644 --- a/src/element/bounds.test.ts +++ b/src/element/bounds.test.ts @@ -13,7 +13,7 @@ const _ce = ({ x, y, w, h }: { x: number; y: number; w: number; h: number }) => x, y, width: w, - height: h + height: h, } as ExcalidrawElement); describe("getElementAbsoluteCoords", () => { @@ -29,14 +29,14 @@ describe("getElementAbsoluteCoords", () => { it("test x2 coordinate if width is positive or zero", () => { const [, , x2] = getElementAbsoluteCoords( - _ce({ x: 10, y: 0, w: 10, h: 0 }) + _ce({ x: 10, y: 0, w: 10, h: 0 }), ); expect(x2).toEqual(20); }); it("test x2 coordinate if width is negative", () => { const [, , x2] = getElementAbsoluteCoords( - _ce({ x: 10, y: 0, w: -10, h: 0 }) + _ce({ x: 10, y: 0, w: -10, h: 0 }), ); expect(x2).toEqual(10); }); @@ -53,14 +53,14 @@ describe("getElementAbsoluteCoords", () => { it("test y2 coordinate if height is positive or zero", () => { const [, , , y2] = getElementAbsoluteCoords( - _ce({ x: 0, y: 10, w: 0, h: 10 }) + _ce({ x: 0, y: 10, w: 0, h: 10 }), ); expect(y2).toEqual(20); }); it("test y2 coordinate if height is negative", () => { const [, , , y2] = getElementAbsoluteCoords( - _ce({ x: 0, y: 10, w: 0, h: -10 }) + _ce({ x: 0, y: 10, w: 0, h: -10 }), ); expect(y2).toEqual(10); }); diff --git a/src/element/bounds.ts b/src/element/bounds.ts index d3dbee14..6b760f7e 100644 --- a/src/element/bounds.ts +++ b/src/element/bounds.ts @@ -10,7 +10,7 @@ export function getElementAbsoluteCoords(element: ExcalidrawElement) { element.width >= 0 ? element.x : element.x + element.width, // x1 element.height >= 0 ? element.y : element.y + element.height, // y1 element.width >= 0 ? element.x + element.width : element.x, // x2 - element.height >= 0 ? element.y + element.height : element.y // y2 + element.height >= 0 ? element.y + element.height : element.y, // y2 ]; } diff --git a/src/element/collision.ts b/src/element/collision.ts index 01ea17e5..3a4990eb 100644 --- a/src/element/collision.ts +++ b/src/element/collision.ts @@ -5,7 +5,7 @@ import { getArrowPoints, getDiamondPoints, getElementAbsoluteCoords, - getLinePoints + getLinePoints, } from "./bounds"; function isElementDraggableFromInside(element: ExcalidrawElement): boolean { @@ -15,7 +15,7 @@ function isElementDraggableFromInside(element: ExcalidrawElement): boolean { export function hitTest( element: ExcalidrawElement, x: number, - y: number + y: number, ): boolean { // For shapes that are composed of lines, we only enable point-selection when the distance // of the click is less than x pixels of any of the lines that the shape is composed of @@ -95,7 +95,7 @@ export function hitTest( bottomX, bottomY, leftX, - leftY + leftY, ] = getDiamondPoints(element); if (isElementDraggableFromInside(element)) { diff --git a/src/element/handlerRectangles.ts b/src/element/handlerRectangles.ts index ab6243ef..ab5374ba 100644 --- a/src/element/handlerRectangles.ts +++ b/src/element/handlerRectangles.ts @@ -5,7 +5,7 @@ type Sides = "n" | "s" | "w" | "e" | "nw" | "ne" | "sw" | "se"; export function handlerRectangles( element: ExcalidrawElement, - { scrollX, scrollY }: SceneScroll + { scrollX, scrollY }: SceneScroll, ) { const elementX1 = element.x; const elementX2 = element.x + element.width; @@ -24,14 +24,14 @@ export function handlerRectangles( elementX1 + (elementX2 - elementX1) / 2 + scrollX - 4, elementY1 - margin + scrollY + marginY, 8, - 8 + 8, ]; handlers["s"] = [ elementX1 + (elementX2 - elementX1) / 2 + scrollX - 4, elementY2 - margin + scrollY - marginY, 8, - 8 + 8, ]; } @@ -40,14 +40,14 @@ export function handlerRectangles( elementX1 - margin + scrollX + marginX, elementY1 + (elementY2 - elementY1) / 2 + scrollY - 4, 8, - 8 + 8, ]; handlers["e"] = [ elementX2 - margin + scrollX - marginX, elementY1 + (elementY2 - elementY1) / 2 + scrollY - 4, 8, - 8 + 8, ]; } @@ -55,31 +55,31 @@ export function handlerRectangles( elementX1 - margin + scrollX + marginX, elementY1 - margin + scrollY + marginY, 8, - 8 + 8, ]; // nw handlers["ne"] = [ elementX2 - margin + scrollX - marginX, elementY1 - margin + scrollY + marginY, 8, - 8 + 8, ]; // ne handlers["sw"] = [ elementX1 - margin + scrollX + marginX, elementY2 - margin + scrollY - marginY, 8, - 8 + 8, ]; // sw handlers["se"] = [ elementX2 - margin + scrollX - marginX, elementY2 - margin + scrollY - marginY, 8, - 8 + 8, ]; // se if (element.type === "arrow" || element.type === "line") { return { nw: handlers.nw, - se: handlers.se + se: handlers.se, } as typeof handlers; } diff --git a/src/element/index.ts b/src/element/index.ts index 45ab30ef..dbe16c28 100644 --- a/src/element/index.ts +++ b/src/element/index.ts @@ -3,7 +3,7 @@ export { getElementAbsoluteCoords, getDiamondPoints, getArrowPoints, - getLinePoints + getLinePoints, } from "./bounds"; export { handlerRectangles } from "./handlerRectangles"; @@ -15,5 +15,5 @@ export { redrawTextBoundingBox } from "./textElement"; export { getPerfectElementSize, isInvisiblySmallElement, - resizePerfectLineForNWHandler + resizePerfectLineForNWHandler, } from "./sizeHelpers"; diff --git a/src/element/newElement.ts b/src/element/newElement.ts index 5d3b7b87..f5ce32e6 100644 --- a/src/element/newElement.ts +++ b/src/element/newElement.ts @@ -16,7 +16,7 @@ export function newElement( roughness: number, opacity: number, width = 0, - height = 0 + height = 0, ) { const element = { id: nanoid(), @@ -33,7 +33,7 @@ export function newElement( opacity, isSelected: false, seed: randomSeed(), - shape: null as Drawable | Drawable[] | null + shape: null as Drawable | Drawable[] | null, }; return element; } @@ -41,7 +41,7 @@ export function newElement( export function newTextElement( element: ExcalidrawElement, text: string, - font: string + font: string, ) { const metrics = measureText(text, font); const textElement: ExcalidrawTextElement = { @@ -54,7 +54,7 @@ export function newTextElement( y: element.y - metrics.height / 2, width: metrics.width, height: metrics.height, - baseline: metrics.baseline + baseline: metrics.baseline, }; return textElement; diff --git a/src/element/resizeTest.ts b/src/element/resizeTest.ts index 3c5eacf8..2c3d8a8c 100644 --- a/src/element/resizeTest.ts +++ b/src/element/resizeTest.ts @@ -9,7 +9,7 @@ export function resizeTest( element: ExcalidrawElement, x: number, y: number, - { scrollX, scrollY }: SceneScroll + { scrollX, scrollY }: SceneScroll, ): HandlerRectanglesRet | false { if (!element.isSelected || element.type === "text") return false; @@ -36,7 +36,7 @@ export function resizeTest( export function getElementWithResizeHandler( elements: readonly ExcalidrawElement[], { x, y }: { x: number; y: number }, - { scrollX, scrollY }: SceneScroll + { scrollX, scrollY }: SceneScroll, ) { return elements.reduce((result, element) => { if (result) { @@ -44,7 +44,7 @@ export function getElementWithResizeHandler( } const resizeHandle = resizeTest(element, x, y, { scrollX, - scrollY + scrollY, }); return resizeHandle ? { element, resizeHandle } : null; }, null as { element: ExcalidrawElement; resizeHandle: ReturnType } | null); diff --git a/src/element/sizeHelpers.ts b/src/element/sizeHelpers.ts index 9773cff3..273a6fd2 100644 --- a/src/element/sizeHelpers.ts +++ b/src/element/sizeHelpers.ts @@ -10,7 +10,7 @@ export function isInvisiblySmallElement(element: ExcalidrawElement): boolean { export function getPerfectElementSize( elementType: string, width: number, - height: number + height: number, ): { width: number; height: number } { const absWidth = Math.abs(width); const absHeight = Math.abs(height); @@ -33,7 +33,7 @@ export function getPerfectElementSize( export function resizePerfectLineForNWHandler( element: ExcalidrawElement, x: number, - y: number + y: number, ) { const anchorX = element.x + element.width; const anchorY = element.y + element.height; diff --git a/src/element/textWysiwyg.tsx b/src/element/textWysiwyg.tsx index 10f25c33..81c3bea0 100644 --- a/src/element/textWysiwyg.tsx +++ b/src/element/textWysiwyg.tsx @@ -22,7 +22,7 @@ export function textWysiwyg({ y, strokeColor, font, - onSubmit + onSubmit, }: TextWysiwygParams) { // Using contenteditable here as it has dynamic width. // But this solution has an issue — it allows to paste @@ -45,7 +45,7 @@ export function textWysiwyg({ padding: "4px", outline: "transparent", whiteSpace: "nowrap", - minHeight: "1em" + minHeight: "1em", }); editable.onkeydown = ev => { diff --git a/src/element/typeChecks.ts b/src/element/typeChecks.ts index 9fa6e01c..4fbde9ad 100644 --- a/src/element/typeChecks.ts +++ b/src/element/typeChecks.ts @@ -1,7 +1,7 @@ import { ExcalidrawElement, ExcalidrawTextElement } from "./types"; export function isTextElement( - element: ExcalidrawElement + element: ExcalidrawElement, ): element is ExcalidrawTextElement { return element.type === "text"; } diff --git a/src/history.ts b/src/history.ts index 30943ac5..6832d211 100644 --- a/src/history.ts +++ b/src/history.ts @@ -8,14 +8,14 @@ class SceneHistory { generateCurrentEntry( appState: Partial, - elements: readonly ExcalidrawElement[] + elements: readonly ExcalidrawElement[], ) { return JSON.stringify({ appState, elements: elements.map(({ shape, ...element }) => ({ ...element, - isSelected: false - })) + isSelected: false, + })), }); } diff --git a/src/i18n.ts b/src/i18n.ts index 9bda068d..ff511aad 100644 --- a/src/i18n.ts +++ b/src/i18n.ts @@ -18,7 +18,7 @@ export const languages = [ { lng: "en", label: "English" }, { lng: "es", label: "Español" }, { lng: "fr", label: "Français" }, - { lng: "pt", label: "Português" } + { lng: "pt", label: "Português" }, ]; i18n @@ -28,7 +28,7 @@ i18n .init({ fallbackLng, react: { useSuspense: false }, - load: "languageOnly" + load: "languageOnly", }); export default i18n; diff --git a/src/index-node.ts b/src/index-node.ts index cf25f30e..f1a63223 100644 --- a/src/index-node.ts +++ b/src/index-node.ts @@ -17,7 +17,7 @@ const elements = [ roughness: 1, opacity: 100, isSelected: false, - seed: 749612521 + seed: 749612521, }, { id: "7W-iw5pEBPTU3eaCaLtFo", @@ -33,7 +33,7 @@ const elements = [ roughness: 1, opacity: 100, isSelected: false, - seed: 952056308 + seed: 952056308, }, { id: "kqKI231mvTrcsYo2DkUsR", @@ -52,8 +52,8 @@ const elements = [ seed: 1683771448, text: "test", font: "20px Virgil", - baseline: 22 - } + baseline: 22, + }, ]; registerFont("./public/FG_Virgil.ttf", { family: "Virgil" }); @@ -62,9 +62,9 @@ const canvas = getExportCanvasPreview( { exportBackground: true, viewBackgroundColor: "#ffffff", - scale: 1 + scale: 1, }, - createCanvas + createCanvas, ); const fs = require("fs"); diff --git a/src/index.tsx b/src/index.tsx index 3395ff46..c8a9dd7b 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -15,7 +15,7 @@ import { getElementAbsoluteCoords, getCursorForResizingElement, getPerfectElementSize, - resizePerfectLineForNWHandler + resizePerfectLineForNWHandler, } from "./element"; import { clearSelection, @@ -31,7 +31,7 @@ import { hasStroke, hasText, exportCanvas, - importFromBackend + importFromBackend, } from "./scene"; import { renderScene } from "./renderer"; @@ -71,7 +71,7 @@ import { actionLoadScene, actionSaveScene, actionCopyStyles, - actionPasteStyles + actionPasteStyles, } from "./actions"; import { Action, ActionResult } from "./actions/types"; import { getDefaultAppState } from "./appState"; @@ -100,7 +100,7 @@ const ELEMENT_TRANSLATE_AMOUNT = 1; const TEXT_TO_CENTER_SNAP_THRESHOLD = 30; const CURSOR_TYPE = { TEXT: "text", - CROSSHAIR: "crosshair" + CROSSHAIR: "crosshair", }; let lastCanvasWidth = -1; @@ -110,7 +110,7 @@ let lastMouseUp: ((e: any) => void) | null = null; export function viewportCoordsToSceneCoords( { clientX, clientY }: { clientX: number; clientY: number }, - { scrollX, scrollY }: { scrollX: number; scrollY: number } + { scrollX, scrollY }: { scrollX: number; scrollY: number }, ) { const x = clientX - CANVAS_WINDOW_OFFSET_LEFT - scrollX; const y = clientY - CANVAS_WINDOW_OFFSET_TOP - scrollY; @@ -118,7 +118,7 @@ export function viewportCoordsToSceneCoords( } function pickAppStatePropertiesForHistory( - appState: AppState + appState: AppState, ): Partial { return { exportBackground: appState.exportBackground, @@ -126,7 +126,7 @@ function pickAppStatePropertiesForHistory( currentItemBackgroundColor: appState.currentItemBackgroundColor, currentItemFont: appState.currentItemFont, viewBackgroundColor: appState.viewBackgroundColor, - name: appState.name + name: appState.name, }; } @@ -186,8 +186,8 @@ export class App extends React.Component { JSON.stringify( elements .filter(element => element.isSelected) - .map(({ shape, ...el }) => el) - ) + .map(({ shape, ...el }) => el), + ), ); elements = deleteSelectedElements(elements); this.forceUpdate(); @@ -200,8 +200,8 @@ export class App extends React.Component { JSON.stringify( elements .filter(element => element.isSelected) - .map(({ shape, ...el }) => el) - ) + .map(({ shape, ...el }) => el), + ), ); e.preventDefault(); }; @@ -257,7 +257,7 @@ export class App extends React.Component { document.removeEventListener( "mousemove", this.getCurrentCursorPosition, - false + false, ); window.removeEventListener("resize", this.onResize, false); window.removeEventListener("unload", this.onUnload, false); @@ -354,7 +354,7 @@ export class App extends React.Component { const text = JSON.stringify( elements .filter(element => element.isSelected) - .map(({ shape, ...el }) => el) + .map(({ shape, ...el }) => el), ); navigator.clipboard.writeText(text); } @@ -393,7 +393,7 @@ export class App extends React.Component { elements, this.state, this.syncActionResult, - t + t, )} {(hasBackground(elements) || @@ -404,7 +404,7 @@ export class App extends React.Component { elements, this.state, this.syncActionResult, - t + t, )} {this.actionManager.renderAction( @@ -412,7 +412,7 @@ export class App extends React.Component { elements, this.state, this.syncActionResult, - t + t, )}
@@ -426,7 +426,7 @@ export class App extends React.Component { elements, this.state, this.syncActionResult, - t + t, )} {this.actionManager.renderAction( @@ -434,7 +434,7 @@ export class App extends React.Component { elements, this.state, this.syncActionResult, - t + t, )}
@@ -447,7 +447,7 @@ export class App extends React.Component { elements, this.state, this.syncActionResult, - t + t, )} {this.actionManager.renderAction( @@ -455,7 +455,7 @@ export class App extends React.Component { elements, this.state, this.syncActionResult, - t + t, )}
@@ -466,7 +466,7 @@ export class App extends React.Component { elements, this.state, this.syncActionResult, - t + t, )} {this.actionManager.renderAction( @@ -474,7 +474,7 @@ export class App extends React.Component { elements, this.state, this.syncActionResult, - t + t, )}
@@ -533,14 +533,14 @@ export class App extends React.Component { elements, this.state, this.syncActionResult, - t + t, )} {this.actionManager.renderAction( "saveScene", elements, this.state, this.syncActionResult, - t + t, )} { exportBackground: this.state.exportBackground, name: this.state.name, viewBackgroundColor: this.state.viewBackgroundColor, - scale + scale, }); }} onExportToClipboard={(exportedElements, scale) => { @@ -562,7 +562,7 @@ export class App extends React.Component { exportBackground: this.state.exportBackground, name: this.state.name, viewBackgroundColor: this.state.viewBackgroundColor, - scale + scale, }); }} onExportToBackend={exportedElements => { @@ -571,10 +571,10 @@ export class App extends React.Component { "backend", exportedElements.map(element => ({ ...element, - isSelected: false + isSelected: false, })), this.canvas, - this.state + this.state, ); }} /> @@ -583,7 +583,7 @@ export class App extends React.Component { elements, this.state, this.syncActionResult, - t + t, )} {this.actionManager.renderAction( @@ -591,7 +591,7 @@ export class App extends React.Component { elements, this.state, this.syncActionResult, - t + t, )} ); @@ -626,7 +626,7 @@ export class App extends React.Component { id="canvas" style={{ width: canvasWidth, - height: canvasHeight + height: canvasHeight, }} width={canvasWidth * window.devicePixelRatio} height={canvasHeight * window.devicePixelRatio} @@ -641,7 +641,7 @@ export class App extends React.Component { } if (canvas) { canvas.addEventListener("wheel", this.handleWheel, { - passive: false + passive: false, }); this.removeWheelEventListener = () => canvas.removeEventListener("wheel", this.handleWheel); @@ -670,18 +670,18 @@ export class App extends React.Component { options: [ navigator.clipboard && { label: t("labels.paste"), - action: () => this.pasteFromClipboard() + action: () => this.pasteFromClipboard(), }, ...this.actionManager.getContextMenuItems( elements, this.state, this.syncActionResult, action => this.canvasOnlyActions.includes(action), - t - ) + t, + ), ], top: e.clientY, - left: e.clientX + left: e.clientX, }); return; } @@ -696,22 +696,22 @@ export class App extends React.Component { options: [ navigator.clipboard && { label: t("labels.copy"), - action: this.copyToClipboard + action: this.copyToClipboard, }, navigator.clipboard && { label: t("labels.paste"), - action: () => this.pasteFromClipboard() + action: () => this.pasteFromClipboard(), }, ...this.actionManager.getContextMenuItems( elements, this.state, this.syncActionResult, action => !this.canvasOnlyActions.includes(action), - t - ) + t, + ), ], top: e.clientY, - left: e.clientX + left: e.clientX, }); }} onMouseDown={e => { @@ -733,7 +733,7 @@ export class App extends React.Component { lastY = e.clientY; this.setState(state => ({ scrollX: state.scrollX - deltaX, - scrollY: state.scrollY - deltaY + scrollY: state.scrollY - deltaY, })); }; const onMouseUp = (lastMouseUp = (e: MouseEvent) => { @@ -743,7 +743,7 @@ export class App extends React.Component { window.removeEventListener("mouseup", onMouseUp); }); window.addEventListener("mousemove", onMouseMove, { - passive: true + passive: true, }); window.addEventListener("mouseup", onMouseUp); return; @@ -763,7 +763,7 @@ export class App extends React.Component { // Handle scrollbars dragging const { isOverHorizontalScrollBar, - isOverVerticalScrollBar + isOverVerticalScrollBar, } = isOverScrollBars( elements, e.clientX - CANVAS_WINDOW_OFFSET_LEFT, @@ -771,7 +771,7 @@ export class App extends React.Component { canvasWidth, canvasHeight, this.state.scrollX, - this.state.scrollY + this.state.scrollY, ); const { x, y } = viewportCoordsToSceneCoords(e, this.state); @@ -785,7 +785,7 @@ export class App extends React.Component { "hachure", 1, 1, - 100 + 100, ); if (isTextElement(element)) { @@ -802,16 +802,16 @@ export class App extends React.Component { const resizeElement = getElementWithResizeHandler( elements, { x, y }, - this.state + this.state, ); this.setState({ - resizingElement: resizeElement ? resizeElement.element : null + resizingElement: resizeElement ? resizeElement.element : null, }); if (resizeElement) { resizeHandle = resizeElement.resizeHandle; document.documentElement.style.cursor = getCursorForResizingElement( - resizeElement + resizeElement, ); isResizingElements = true; } else { @@ -837,7 +837,7 @@ export class App extends React.Component { elements = [ ...elements.map(element => ({ ...element, - isSelected: false + isSelected: false, })), ...elements .filter(element => element.isSelected) @@ -845,7 +845,7 @@ export class App extends React.Component { const newElement = duplicateElement(element); newElement.isSelected = true; return newElement; - }) + }), ]; } } @@ -860,7 +860,7 @@ export class App extends React.Component { if (!e.altKey) { const snappedToCenterPosition = this.getTextWysiwygSnappedToCenterPosition( x, - y + y, ); if (snappedToCenterPosition) { element.x = snappedToCenterPosition.elementCenterX; @@ -884,22 +884,22 @@ export class App extends React.Component { ...newTextElement( element, text, - this.state.currentItemFont + this.state.currentItemFont, ), - isSelected: true - } + isSelected: true, + }, ]; } this.setState({ draggingElement: null, editingElement: null, - elementType: "selection" + elementType: "selection", }); - } + }, }); this.setState({ elementType: "selection", - editingElement: element + editingElement: element, }); return; } @@ -993,7 +993,7 @@ export class App extends React.Component { const { width, height } = getPerfectElementSize( element.type, x - element.x, - y - element.y + y - element.y, ); element.width = width; element.height = height; @@ -1023,7 +1023,7 @@ export class App extends React.Component { } document.documentElement.style.cursor = getCursorForResizingElement( - { element, resizeHandle } + { element, resizeHandle }, ); el.x = element.x; el.y = element.y; @@ -1078,11 +1078,11 @@ export class App extends React.Component { if (e.shiftKey) { let { width: newWidth, - height: newHeight + height: newHeight, } = getPerfectElementSize( this.state.elementType, width, - height + height, ); draggingElement.width = newWidth; draggingElement.height = newHeight; @@ -1099,7 +1099,7 @@ export class App extends React.Component { } const elementsWithinSelection = getElementsWithinSelection( elements, - draggingElement + draggingElement, ); elementsWithinSelection.forEach(element => { element.isSelected = true; @@ -1115,7 +1115,7 @@ export class App extends React.Component { draggingElement, resizingElement, elementType, - elementLocked + elementLocked, } = this.state; lastMouseUp = null; @@ -1130,7 +1130,7 @@ export class App extends React.Component { // remove invisible element which was added in onMouseDown elements = elements.slice(0, -1); this.setState({ - draggingElement: null + draggingElement: null, }); this.forceUpdate(); return; @@ -1179,7 +1179,7 @@ export class App extends React.Component { this.setState({ draggingElement: null, - elementType: "selection" + elementType: "selection", }); } @@ -1214,10 +1214,10 @@ export class App extends React.Component { "hachure", 1, 1, - 100 + 100, ), "", // default text - this.state.currentItemFont // default font + this.state.currentItemFont, // default font ); this.setState({ editingElement: element }); @@ -1227,7 +1227,7 @@ export class App extends React.Component { if (elementAtPosition && isTextElement(elementAtPosition)) { elements = elements.filter( - element => element.id !== elementAtPosition.id + element => element.id !== elementAtPosition.id, ); this.forceUpdate(); @@ -1248,7 +1248,7 @@ export class App extends React.Component { } else if (!e.altKey) { const snappedToCenterPosition = this.getTextWysiwygSnappedToCenterPosition( x, - y + y, ); if (snappedToCenterPosition) { @@ -1273,16 +1273,16 @@ export class App extends React.Component { // we need to recreate the element to update dimensions & // position ...newTextElement(element, text, element.font), - isSelected: true - } + isSelected: true, + }, ]; } this.setState({ draggingElement: null, editingElement: null, - elementType: "selection" + elementType: "selection", }); - } + }, }); }} onMouseMove={e => { @@ -1296,11 +1296,11 @@ export class App extends React.Component { const resizeElement = getElementWithResizeHandler( elements, { x, y }, - this.state + this.state, ); if (resizeElement && resizeElement.resizeHandle) { document.documentElement.style.cursor = getCursorForResizingElement( - resizeElement + resizeElement, ); return; } @@ -1327,7 +1327,7 @@ export class App extends React.Component { const { deltaX, deltaY } = e; this.setState(state => ({ scrollX: state.scrollX - deltaX, - scrollY: state.scrollY - deltaY + scrollY: state.scrollY - deltaY, })); }; @@ -1384,7 +1384,7 @@ export class App extends React.Component { duplicate.x += dx - minX; duplicate.y += dy - minY; return duplicate; - }) + }), ]; this.forceUpdate(); } @@ -1399,7 +1399,7 @@ export class App extends React.Component { elementClickedInside.y + elementClickedInside.height / 2; const distanceToCenter = Math.hypot( x - elementCenterX, - y - elementCenterY + y - elementCenterY, ); const isSnappedToCenter = distanceToCenter < TEXT_TO_CENTER_SNAP_THRESHOLD; @@ -1427,15 +1427,15 @@ export class App extends React.Component { renderScene(elements, this.rc!, this.canvas!, { scrollX: this.state.scrollX, scrollY: this.state.scrollY, - viewBackgroundColor: this.state.viewBackgroundColor + viewBackgroundColor: this.state.viewBackgroundColor, }); this.saveDebounced(); if (history.isRecording()) { history.pushEntry( history.generateCurrentEntry( pickAppStatePropertiesForHistory(this.state), - elements - ) + elements, + ), ); } } @@ -1453,7 +1453,7 @@ class TopErrorBoundary extends React.Component { return { hasError: true, localStorage: JSON.stringify({ ...localStorage }), - stack: error.stack + stack: error.stack, }; } @@ -1471,7 +1471,7 @@ class TopErrorBoundary extends React.Component { } catch {} window.open( - `https://github.com/excalidraw/excalidraw/issues/new?body=${body}` + `https://github.com/excalidraw/excalidraw/issues/new?body=${body}`, ); } @@ -1539,5 +1539,5 @@ ReactDOM.render( , - rootElement + rootElement, ); diff --git a/src/keys.ts b/src/keys.ts index 665488ba..36138a32 100644 --- a/src/keys.ts +++ b/src/keys.ts @@ -11,7 +11,7 @@ export const KEYS = { return /Mac|iPod|iPhone|iPad/.test(window.navigator.platform) ? "metaKey" : "ctrlKey"; - } + }, }; export function isArrowKey(keyCode: string) { diff --git a/src/math.ts b/src/math.ts index 5b8f119f..bbcbe17d 100644 --- a/src/math.ts +++ b/src/math.ts @@ -5,7 +5,7 @@ export function distanceBetweenPointAndSegment( x1: number, y1: number, x2: number, - y2: number + y2: number, ) { const A = x - x1; const B = y - y1; @@ -42,13 +42,13 @@ export function rotate( y1: number, x2: number, y2: number, - angle: number + angle: number, ) { // 𝑎′𝑥=(𝑎𝑥−𝑐𝑥)cos𝜃−(𝑎𝑦−𝑐𝑦)sin𝜃+𝑐𝑥 // 𝑎′𝑦=(𝑎𝑥−𝑐𝑥)sin𝜃+(𝑎𝑦−𝑐𝑦)cos𝜃+𝑐𝑦. // https://math.stackexchange.com/questions/2204520/how-do-i-rotate-a-line-segment-in-a-specific-point-on-the-line return [ (x1 - x2) * Math.cos(angle) - (y1 - y2) * Math.sin(angle) + x2, - (x1 - x2) * Math.sin(angle) + (y1 - y2) * Math.cos(angle) + y2 + (x1 - x2) * Math.sin(angle) + (y1 - y2) * Math.cos(angle) + y2, ]; } diff --git a/src/renderer/renderElement.ts b/src/renderer/renderElement.ts index 104b713e..d0fd0fc3 100644 --- a/src/renderer/renderElement.ts +++ b/src/renderer/renderElement.ts @@ -3,7 +3,7 @@ import { isTextElement } from "../element/typeChecks"; import { getDiamondPoints, getArrowPoints, - getLinePoints + getLinePoints, } from "../element/bounds"; import { RoughCanvas } from "roughjs/bin/canvas"; import { Drawable } from "roughjs/bin/core"; @@ -11,7 +11,7 @@ import { Drawable } from "roughjs/bin/core"; export function renderElement( element: ExcalidrawElement, rc: RoughCanvas, - context: CanvasRenderingContext2D + context: CanvasRenderingContext2D, ) { const generator = rc.generator; if (element.type === "selection") { @@ -30,7 +30,7 @@ export function renderElement( fillStyle: element.fillStyle, strokeWidth: element.strokeWidth, roughness: element.roughness, - seed: element.seed + seed: element.seed, }); } @@ -47,14 +47,14 @@ export function renderElement( bottomX, bottomY, leftX, - leftY + leftY, ] = getDiamondPoints(element); element.shape = generator.polygon( [ [topX, topY], [rightX, rightY], [bottomX, bottomY], - [leftX, leftY] + [leftX, leftY], ], { stroke: element.strokeColor, @@ -65,8 +65,8 @@ export function renderElement( fillStyle: element.fillStyle, strokeWidth: element.strokeWidth, roughness: element.roughness, - seed: element.seed - } + seed: element.seed, + }, ); } @@ -90,8 +90,8 @@ export function renderElement( strokeWidth: element.strokeWidth, roughness: element.roughness, seed: element.seed, - curveFitting: 1 - } + curveFitting: 1, + }, ); } @@ -104,7 +104,7 @@ export function renderElement( stroke: element.strokeColor, strokeWidth: element.strokeWidth, roughness: element.roughness, - seed: element.seed + seed: element.seed, }; if (!element.shape) { @@ -114,7 +114,7 @@ export function renderElement( // ----- generator.line(x1, y1, x2, y2, options), // / - generator.line(x4, y4, x2, y2, options) + generator.line(x4, y4, x2, y2, options), ]; } @@ -128,7 +128,7 @@ export function renderElement( stroke: element.strokeColor, strokeWidth: element.strokeWidth, roughness: element.roughness, - seed: element.seed + seed: element.seed, }; if (!element.shape) { @@ -147,7 +147,7 @@ export function renderElement( context.fillText( element.text, 0, - element.baseline || element.actualBoundingBoxAscent || 0 + element.baseline || element.actualBoundingBoxAscent || 0, ); context.fillStyle = fillStyle; context.font = font; diff --git a/src/renderer/renderScene.ts b/src/renderer/renderScene.ts index ca4c4bf4..d38e64d8 100644 --- a/src/renderer/renderScene.ts +++ b/src/renderer/renderScene.ts @@ -8,7 +8,7 @@ import { SceneState } from "../scene/types"; import { getScrollBars, SCROLLBAR_COLOR, - SCROLLBAR_WIDTH + SCROLLBAR_WIDTH, } from "../scene/scrollbars"; import { renderElement } from "./renderElement"; @@ -23,13 +23,13 @@ export function renderScene( offsetX, offsetY, renderScrollbars = true, - renderSelection = true + renderSelection = true, }: { offsetX?: number; offsetY?: number; renderScrollbars?: boolean; renderSelection?: boolean; - } = {} + } = {}, ) { if (!canvas) return; const context = canvas.getContext("2d")!; @@ -53,7 +53,7 @@ export function renderScene( sceneState = { ...sceneState, scrollX: typeof offsetX === "number" ? offsetX : sceneState.scrollX, - scrollY: typeof offsetY === "number" ? offsetY : sceneState.scrollY + scrollY: typeof offsetY === "number" ? offsetY : sceneState.scrollY, }; elements.forEach(element => { @@ -65,19 +65,19 @@ export function renderScene( // If canvas is scaled for high pixelDeviceRatio width and height // setted in the `style` attribute parseInt(canvas.style.width) || canvas.width, - parseInt(canvas.style.height) || canvas.height + parseInt(canvas.style.height) || canvas.height, ) ) { return; } context.translate( element.x + sceneState.scrollX, - element.y + sceneState.scrollY + element.y + sceneState.scrollY, ); renderElement(element, rc, context); context.translate( -element.x - sceneState.scrollX, - -element.y - sceneState.scrollY + -element.y - sceneState.scrollY, ); }); @@ -91,7 +91,7 @@ export function renderScene( elementX1, elementY1, elementX2, - elementY2 + elementY2, ] = getElementAbsoluteCoords(element); const lineDash = context.getLineDash(); context.setLineDash([8, 4]); @@ -99,7 +99,7 @@ export function renderScene( elementX1 - margin + sceneState.scrollX, elementY1 - margin + sceneState.scrollY, elementX2 - elementX1 + margin * 2, - elementY2 - elementY1 + margin * 2 + elementY2 - elementY1 + margin * 2, ); context.setLineDash(lineDash); }); @@ -118,7 +118,7 @@ export function renderScene( context.canvas.width / window.devicePixelRatio, context.canvas.height / window.devicePixelRatio, sceneState.scrollX, - sceneState.scrollY + sceneState.scrollY, ); const strokeStyle = context.strokeStyle; @@ -132,7 +132,7 @@ export function renderScene( scrollBar.y, scrollBar.width, scrollBar.height, - SCROLLBAR_WIDTH / 2 + SCROLLBAR_WIDTH / 2, ); }); context.strokeStyle = strokeStyle; @@ -145,7 +145,7 @@ function isVisibleElement( scrollX: number, scrollY: number, canvasWidth: number, - canvasHeight: number + canvasHeight: number, ) { let [x1, y1, x2, y2] = getElementAbsoluteCoords(element); x1 += scrollX; diff --git a/src/renderer/roundRect.ts b/src/renderer/roundRect.ts index bba0e6de..14bf4367 100644 --- a/src/renderer/roundRect.ts +++ b/src/renderer/roundRect.ts @@ -14,7 +14,7 @@ export function roundRect( y: number, width: number, height: number, - radius: number + radius: number, ) { context.beginPath(); context.moveTo(x + radius, y); @@ -25,7 +25,7 @@ export function roundRect( x + width, y + height, x + width - radius, - y + height + y + height, ); context.lineTo(x + radius, y + height); context.quadraticCurveTo(x, y + height, x, y + height - radius); diff --git a/src/scene/comparisons.ts b/src/scene/comparisons.ts index 20380e00..382fa999 100644 --- a/src/scene/comparisons.ts +++ b/src/scene/comparisons.ts @@ -8,7 +8,7 @@ export const hasBackground = (elements: readonly ExcalidrawElement[]) => element.isSelected && (element.type === "rectangle" || element.type === "ellipse" || - element.type === "diamond") + element.type === "diamond"), ); export const hasStroke = (elements: readonly ExcalidrawElement[]) => @@ -19,7 +19,7 @@ export const hasStroke = (elements: readonly ExcalidrawElement[]) => element.type === "ellipse" || element.type === "diamond" || element.type === "arrow" || - element.type === "line") + element.type === "line"), ); export const hasText = (elements: readonly ExcalidrawElement[]) => @@ -28,7 +28,7 @@ export const hasText = (elements: readonly ExcalidrawElement[]) => export function getElementAtPosition( elements: readonly ExcalidrawElement[], x: number, - y: number + y: number, ) { let hitElement = null; // We need to to hit testing from front (end of the array) to back (beginning of the array) @@ -45,7 +45,7 @@ export function getElementAtPosition( export function getElementContainingPosition( elements: readonly ExcalidrawElement[], x: number, - y: number + y: number, ) { let hitElement = null; // We need to to hit testing from front (end of the array) to back (beginning of the array) diff --git a/src/scene/data.ts b/src/scene/data.ts index 43b1fec0..00d3e358 100644 --- a/src/scene/data.ts +++ b/src/scene/data.ts @@ -27,19 +27,19 @@ interface DataState { export function serializeAsJSON( elements: readonly ExcalidrawElement[], - appState?: AppState + appState?: AppState, ): string { return JSON.stringify({ version: 1, source: window.location.origin, elements: elements.map(({ shape, ...el }) => el), - appState: appState || getDefaultAppState() + appState: appState || getDefaultAppState(), }); } export async function saveAsJSON( elements: readonly ExcalidrawElement[], - appState: AppState + appState: AppState, ) { const serialized = serializeAsJSON(elements, appState); @@ -48,9 +48,9 @@ export async function saveAsJSON( new Blob([serialized], { type: "application/json" }), { fileName: name, - description: "Excalidraw file" + description: "Excalidraw file", }, - (window as any).handle + (window as any).handle, ); } @@ -72,7 +72,7 @@ export async function loadFromJSON() { const blob = await fileOpen({ description: "Excalidraw files", extensions: ["json"], - mimeTypes: ["application/json"] + mimeTypes: ["application/json"], }); if (blob.handle) { (window as any).handle = blob.handle; @@ -101,12 +101,12 @@ export async function loadFromJSON() { export async function exportToBackend( elements: readonly ExcalidrawElement[], - appState: AppState + appState: AppState, ) { const response = await fetch(BACKEND_POST, { method: "POST", headers: { "Content-Type": "application/json" }, - body: serializeAsJSON(elements, appState) + body: serializeAsJSON(elements, appState), }); const json = await response.json(); if (json.id) { @@ -117,8 +117,8 @@ export async function exportToBackend( window.alert( i18n.t("alerts.copiedToClipboard", { url: url.toString(), - interpolation: { escapeValue: false } - }) + interpolation: { escapeValue: false }, + }), ); } else { window.alert(i18n.t("alerts.couldNotCreateShareableLink")); @@ -129,7 +129,7 @@ export async function importFromBackend(id: string | null) { let elements: readonly ExcalidrawElement[] = []; let appState: AppState = getDefaultAppState(); const response = await fetch(`${BACKEND_GET}${id}.json`).then(data => - data.clone().json() + data.clone().json(), ); if (response != null) { try { @@ -152,14 +152,14 @@ export async function exportCanvas( exportPadding = 10, viewBackgroundColor, name, - scale = 1 + scale = 1, }: { exportBackground: boolean; exportPadding?: number; viewBackgroundColor: string; name: string; scale?: number; - } + }, ) { if (!elements.length) return window.alert(i18n.t("alerts.cannotExportEmptyCanvas")); @@ -169,7 +169,7 @@ export async function exportCanvas( exportBackground, viewBackgroundColor, exportPadding, - scale + scale, }); tempCanvas.style.display = "none"; document.body.appendChild(tempCanvas); @@ -180,7 +180,7 @@ export async function exportCanvas( if (blob) { await fileSave(blob, { fileName: fileName, - description: "Excalidraw image" + description: "Excalidraw image", }); } }); @@ -190,7 +190,7 @@ export async function exportCanvas( tempCanvas.toBlob(async function(blob: any) { try { await navigator.clipboard.write([ - new window.ClipboardItem({ "image/png": blob }) + new window.ClipboardItem({ "image/png": blob }), ]); } catch (err) { window.alert(errorMsg); @@ -213,7 +213,7 @@ export async function exportCanvas( function restore( savedElements: readonly ExcalidrawElement[], - savedState: AppState + savedState: AppState, ): DataState { return { elements: savedElements.map(element => ({ @@ -225,9 +225,9 @@ function restore( opacity: element.opacity === null || element.opacity === undefined ? 100 - : element.opacity + : element.opacity, })), - appState: savedState + appState: savedState, }; } @@ -239,7 +239,7 @@ export function restoreFromLocalStorage() { if (savedElements) { try { elements = JSON.parse(savedElements).map( - ({ shape, ...element }: ExcalidrawElement) => element + ({ shape, ...element }: ExcalidrawElement) => element, ); } catch (e) { // Do nothing because elements array is already empty @@ -260,7 +260,7 @@ export function restoreFromLocalStorage() { export function saveToLocalStorage( elements: readonly ExcalidrawElement[], - state: AppState + state: AppState, ) { localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(elements)); localStorage.setItem(LOCAL_STORAGE_KEY_STATE, JSON.stringify(state)); diff --git a/src/scene/getExportCanvasPreview.ts b/src/scene/getExportCanvasPreview.ts index a25c50c6..e6ab59c4 100644 --- a/src/scene/getExportCanvasPreview.ts +++ b/src/scene/getExportCanvasPreview.ts @@ -9,7 +9,7 @@ export function getExportCanvasPreview( exportBackground, exportPadding = 10, viewBackgroundColor, - scale = 1 + scale = 1, }: { exportBackground: boolean; exportPadding?: number; @@ -18,13 +18,13 @@ export function getExportCanvasPreview( }, createCanvas: (width: number, height: number) => any = function( width, - height + height, ) { const tempCanvas = document.createElement("canvas"); tempCanvas.width = width * scale; tempCanvas.height = height * scale; return tempCanvas; - } + }, ) { // calculate smallest area to fit the contents in let subCanvasX1 = Infinity; @@ -56,14 +56,14 @@ export function getExportCanvasPreview( { viewBackgroundColor: exportBackground ? viewBackgroundColor : null, scrollX: 0, - scrollY: 0 + scrollY: 0, }, { offsetX: -subCanvasX1 + exportPadding, offsetY: -subCanvasY1 + exportPadding, renderScrollbars: false, - renderSelection: false - } + renderSelection: false, + }, ); return tempCanvas; } diff --git a/src/scene/index.ts b/src/scene/index.ts index ded8d71c..58d9b837 100644 --- a/src/scene/index.ts +++ b/src/scene/index.ts @@ -5,7 +5,7 @@ export { deleteSelectedElements, someElementIsSelected, getElementsWithinSelection, - getCommonAttributeOfSelectedElements + getCommonAttributeOfSelectedElements, } from "./selection"; export { exportCanvas, @@ -14,13 +14,13 @@ export { restoreFromLocalStorage, saveToLocalStorage, exportToBackend, - importFromBackend + importFromBackend, } from "./data"; export { hasBackground, hasStroke, getElementAtPosition, getElementContainingPosition, - hasText + hasText, } from "./comparisons"; export { createScene } from "./createScene"; diff --git a/src/scene/scrollbars.ts b/src/scene/scrollbars.ts index 0c0043ce..76720cf7 100644 --- a/src/scene/scrollbars.ts +++ b/src/scene/scrollbars.ts @@ -11,7 +11,7 @@ export function getScrollBars( canvasWidth: number, canvasHeight: number, scrollX: number, - scrollY: number + scrollY: number, ) { let minX = Infinity; let maxX = 0; @@ -41,14 +41,14 @@ export function getScrollBars( horizontalScrollBar = { x: Math.min( leftOverflow + SCROLLBAR_MARGIN, - canvasWidth - SCROLLBAR_MIN_SIZE - SCROLLBAR_MARGIN + canvasWidth - SCROLLBAR_MIN_SIZE - SCROLLBAR_MARGIN, ), y: canvasHeight - SCROLLBAR_WIDTH - SCROLLBAR_MARGIN, width: Math.max( canvasWidth - rightOverflow - leftOverflow - SCROLLBAR_MARGIN * 2, - SCROLLBAR_MIN_SIZE + SCROLLBAR_MIN_SIZE, ), - height: SCROLLBAR_WIDTH + height: SCROLLBAR_WIDTH, }; } @@ -59,19 +59,19 @@ export function getScrollBars( x: canvasWidth - SCROLLBAR_WIDTH - SCROLLBAR_MARGIN, y: Math.min( topOverflow + SCROLLBAR_MARGIN, - canvasHeight - SCROLLBAR_MIN_SIZE - SCROLLBAR_MARGIN + canvasHeight - SCROLLBAR_MIN_SIZE - SCROLLBAR_MARGIN, ), width: SCROLLBAR_WIDTH, height: Math.max( canvasHeight - bottomOverflow - topOverflow - SCROLLBAR_WIDTH * 2, - SCROLLBAR_MIN_SIZE - ) + SCROLLBAR_MIN_SIZE, + ), }; } return { horizontal: horizontalScrollBar, - vertical: verticalScrollBar + vertical: verticalScrollBar, }; } @@ -82,30 +82,30 @@ export function isOverScrollBars( canvasWidth: number, canvasHeight: number, scrollX: number, - scrollY: number + scrollY: number, ) { const scrollBars = getScrollBars( elements, canvasWidth, canvasHeight, scrollX, - scrollY + scrollY, ); const [isOverHorizontalScrollBar, isOverVerticalScrollBar] = [ scrollBars.horizontal, - scrollBars.vertical + scrollBars.vertical, ].map( scrollBar => scrollBar && scrollBar.x <= x && x <= scrollBar.x + scrollBar.width && scrollBar.y <= y && - y <= scrollBar.y + scrollBar.height + y <= scrollBar.y + scrollBar.height, ); return { isOverHorizontalScrollBar, - isOverVerticalScrollBar + isOverVerticalScrollBar, }; } diff --git a/src/scene/selection.ts b/src/scene/selection.ts index 6ceb03e8..cf11f139 100644 --- a/src/scene/selection.ts +++ b/src/scene/selection.ts @@ -3,20 +3,20 @@ import { getElementAbsoluteCoords } from "../element"; export function getElementsWithinSelection( elements: readonly ExcalidrawElement[], - selection: ExcalidrawElement + selection: ExcalidrawElement, ) { const [ selectionX1, selectionY1, selectionX2, - selectionY2 + selectionY2, ] = getElementAbsoluteCoords(selection); return elements.filter(element => { const [ elementX1, elementY1, elementX2, - elementY2 + elementY2, ] = getElementAbsoluteCoords(element); return ( @@ -62,14 +62,14 @@ export const someElementIsSelected = (elements: readonly ExcalidrawElement[]) => */ export function getCommonAttributeOfSelectedElements( elements: readonly ExcalidrawElement[], - getAttribute: (element: ExcalidrawElement) => T + getAttribute: (element: ExcalidrawElement) => T, ): T | null { const attributes = Array.from( new Set( elements .filter(element => element.isSelected) - .map(element => getAttribute(element)) - ) + .map(element => getAttribute(element)), + ), ); return attributes.length === 1 ? attributes[0] : null; } diff --git a/src/shapes.tsx b/src/shapes.tsx index 1bddbdbb..942e018b 100644 --- a/src/shapes.tsx +++ b/src/shapes.tsx @@ -9,7 +9,7 @@ export const SHAPES = [ ), - value: "selection" + value: "selection", }, { icon: ( @@ -18,7 +18,7 @@ export const SHAPES = [ ), - value: "rectangle" + value: "rectangle", }, { icon: ( @@ -27,7 +27,7 @@ export const SHAPES = [ ), - value: "diamond" + value: "diamond", }, { icon: ( @@ -36,7 +36,7 @@ export const SHAPES = [ ), - value: "ellipse" + value: "ellipse", }, { icon: ( @@ -45,7 +45,7 @@ export const SHAPES = [ ), - value: "arrow" + value: "arrow", }, { icon: ( @@ -54,7 +54,7 @@ export const SHAPES = [ ), - value: "line" + value: "line", }, { icon: ( @@ -63,13 +63,13 @@ export const SHAPES = [ ), - value: "text" - } + value: "text", + }, ]; export const shapesShortcutKeys = SHAPES.map((shape, index) => [ shape.value[0], - (index + 1).toString() + (index + 1).toString(), ]).flat(1); export function findShapeByKey(key: string) { diff --git a/src/utils.ts b/src/utils.ts index 9085f3c2..b99fd646 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -15,7 +15,7 @@ export function capitalizeString(str: string) { } export function isInputLike( - target: Element | EventTarget | null + target: Element | EventTarget | null, ): target is HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement { return ( (target instanceof HTMLElement && target.dataset.type === "wysiwyg") || @@ -54,7 +54,7 @@ export function measureText(text: string, font: string) { export function debounce( fn: (...args: T) => void, - timeout: number + timeout: number, ) { let handle = 0; let lastArgs: T; diff --git a/src/zindex.test.ts b/src/zindex.test.ts index c85b0c87..40485c32 100644 --- a/src/zindex.test.ts +++ b/src/zindex.test.ts @@ -4,7 +4,7 @@ function expectMove( fn: (elements: T[], indicesToMove: number[]) => void, elems: T[], indices: number[], - equal: T[] + equal: T[], ) { fn(elems, indices); expect(elems).toEqual(equal); @@ -17,7 +17,7 @@ it("should moveOneLeft", () => { moveOneLeft, ["a", "b", "c", "d"], [0, 1, 2, 3], - ["a", "b", "c", "d"] + ["a", "b", "c", "d"], ); expectMove(moveOneLeft, ["a", "b", "c", "d"], [1, 3], ["b", "a", "d", "c"]); }); @@ -29,7 +29,7 @@ it("should moveOneRight", () => { moveOneRight, ["a", "b", "c", "d"], [0, 1, 2, 3], - ["a", "b", "c", "d"] + ["a", "b", "c", "d"], ); expectMove(moveOneRight, ["a", "b", "c", "d"], [0, 2], ["b", "a", "d", "c"]); }); @@ -39,31 +39,31 @@ it("should moveAllLeft", () => { moveAllLeft, ["a", "b", "c", "d", "e", "f", "g"], [2, 5], - ["c", "f", "a", "b", "d", "e", "g"] + ["c", "f", "a", "b", "d", "e", "g"], ); expectMove( moveAllLeft, ["a", "b", "c", "d", "e", "f", "g"], [5], - ["f", "a", "b", "c", "d", "e", "g"] + ["f", "a", "b", "c", "d", "e", "g"], ); expectMove( moveAllLeft, ["a", "b", "c", "d", "e", "f", "g"], [0, 1, 2, 3, 4, 5, 6], - ["a", "b", "c", "d", "e", "f", "g"] + ["a", "b", "c", "d", "e", "f", "g"], ); expectMove( moveAllLeft, ["a", "b", "c", "d", "e", "f", "g"], [0, 1, 2], - ["a", "b", "c", "d", "e", "f", "g"] + ["a", "b", "c", "d", "e", "f", "g"], ); expectMove( moveAllLeft, ["a", "b", "c", "d", "e", "f", "g"], [4, 5, 6], - ["e", "f", "g", "a", "b", "c", "d"] + ["e", "f", "g", "a", "b", "c", "d"], ); }); @@ -72,30 +72,30 @@ it("should moveAllRight", () => { moveAllRight, ["a", "b", "c", "d", "e", "f", "g"], [2, 5], - ["a", "b", "d", "e", "g", "c", "f"] + ["a", "b", "d", "e", "g", "c", "f"], ); expectMove( moveAllRight, ["a", "b", "c", "d", "e", "f", "g"], [5], - ["a", "b", "c", "d", "e", "g", "f"] + ["a", "b", "c", "d", "e", "g", "f"], ); expectMove( moveAllRight, ["a", "b", "c", "d", "e", "f", "g"], [0, 1, 2, 3, 4, 5, 6], - ["a", "b", "c", "d", "e", "f", "g"] + ["a", "b", "c", "d", "e", "f", "g"], ); expectMove( moveAllRight, ["a", "b", "c", "d", "e", "f", "g"], [0, 1, 2], - ["d", "e", "f", "g", "a", "b", "c"] + ["d", "e", "f", "g", "a", "b", "c"], ); expectMove( moveAllRight, ["a", "b", "c", "d", "e", "f", "g"], [4, 5, 6], - ["a", "b", "c", "d", "e", "f", "g"] + ["a", "b", "c", "d", "e", "f", "g"], ); }); diff --git a/src/zindex.ts b/src/zindex.ts index bc723294..4f54fe65 100644 --- a/src/zindex.ts +++ b/src/zindex.ts @@ -23,7 +23,7 @@ export function moveOneLeft(elements: T[], indicesToMove: number[]) { export function moveOneRight(elements: T[], indicesToMove: number[]) { const reversedIndicesToMove = indicesToMove.sort( - (a: number, b: number) => b - a + (a: number, b: number) => b - a, ); let isSorted = true; @@ -166,7 +166,7 @@ export function moveAllLeft(elements: T[], indicesToMove: number[]) { // And we are done! export function moveAllRight(elements: T[], indicesToMove: number[]) { const reversedIndicesToMove = indicesToMove.sort( - (a: number, b: number) => b - a + (a: number, b: number) => b - a, ); // Copy the elements to move