diff --git a/package-lock.json b/package-lock.json index d78e3f76..8ea0a5e2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12261,9 +12261,9 @@ "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=" }, "prettier": { - "version": "1.19.1", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz", - "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.0.1.tgz", + "integrity": "sha512-piXGBcY1zoFOG0MvHpNE5reAGseLmaCRifQ/fmfF49BcYkInEs/naD/unxGNAeOKFA5+JxVrPyMvMlpzcd20UA==", "dev": true }, "prettier-linter-helpers": { diff --git a/package.json b/package.json index 677a5ac6..2fbe4ff8 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ "lint-staged": "10.0.8", "node-sass": "4.13.1", "pepjs": "0.5.2", - "prettier": "1.19.1", + "prettier": "2.0.1", "rewire": "5.0.0", "typescript": "3.8.3" }, diff --git a/public/index.html b/public/index.html index 83a2de47..0a7176e5 100644 --- a/public/index.html +++ b/public/index.html @@ -159,7 +159,7 @@ width="40" height="40" viewBox="0 0 250 250" - style="position: absolute; top: 0; right: 0" + style="position: absolute; top: 0; right: 0;" > `0${digit}`.slice(-2); +const zero = (digit) => `0${digit}`.slice(-2); -const versionDate = date => { +const versionDate = (date) => { const date_ = `${date.getFullYear()}-${zero(date.getMonth() + 1)}-${zero( date.getDate(), )}`; diff --git a/src/actions/actionCanvas.tsx b/src/actions/actionCanvas.tsx index 182da736..a6dc57fa 100644 --- a/src/actions/actionCanvas.tsx +++ b/src/actions/actionCanvas.tsx @@ -26,7 +26,7 @@ export const actionChangeViewBackgroundColor = register({ label={t("labels.canvasBackground")} type="canvasBackground" color={appState.viewBackgroundColor} - onChange={color => updateData(color)} + onChange={(color) => updateData(color)} /> ); @@ -35,9 +35,9 @@ export const actionChangeViewBackgroundColor = register({ export const actionClearCanvas = register({ name: "clearCanvas", - perform: elements => { + perform: (elements) => { return { - elements: elements.map(element => + elements: elements.map((element) => newElementWith(element, { isDeleted: true }), ), appState: getDefaultAppState(), @@ -97,7 +97,7 @@ export const actionZoomIn = register({ }} /> ), - keyTest: event => + keyTest: (event) => (event.code === KEY_CODES.EQUAL || event.code === KEY_CODES.NUM_ADD) && (event[KEYS.CTRL_OR_CMD] || event.shiftKey), }); @@ -124,7 +124,7 @@ export const actionZoomOut = register({ }} /> ), - keyTest: event => + keyTest: (event) => (event.code === KEY_CODES.MINUS || event.code === KEY_CODES.NUM_SUBTRACT) && (event[KEYS.CTRL_OR_CMD] || event.shiftKey), }); @@ -151,7 +151,7 @@ export const actionResetZoom = register({ }} /> ), - keyTest: event => + keyTest: (event) => (event.code === KEY_CODES.ZERO || event.code === KEY_CODES.NUM_ZERO) && (event[KEYS.CTRL_OR_CMD] || event.shiftKey), }); diff --git a/src/actions/actionDeleteSelected.tsx b/src/actions/actionDeleteSelected.tsx index dcf84341..0b67d8c9 100644 --- a/src/actions/actionDeleteSelected.tsx +++ b/src/actions/actionDeleteSelected.tsx @@ -25,7 +25,7 @@ export const actionDeleteSelected = register({ }, 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, PanelComponent: ({ elements, appState, updateData }) => ( event[KEYS.CTRL_OR_CMD] && event.key === "d", + keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === "d", }); diff --git a/src/actions/actionExport.tsx b/src/actions/actionExport.tsx index d790e81f..41fd9dc6 100644 --- a/src/actions/actionExport.tsx +++ b/src/actions/actionExport.tsx @@ -34,7 +34,7 @@ export const actionChangeExportBackground = register({ updateData(event.target.checked)} + onChange={(event) => updateData(event.target.checked)} />{" "} {t("labels.withBackground")} @@ -44,7 +44,7 @@ export const actionChangeExportBackground = register({ export const actionSaveScene = register({ name: "saveScene", perform: (elements, appState, value) => { - saveAsJSON(elements, appState).catch(error => console.error(error)); + saveAsJSON(elements, appState).catch((error) => console.error(error)); return { commitToHistory: false }; }, PanelComponent: ({ updateData }) => ( @@ -84,7 +84,7 @@ export const actionLoadScene = register({ .then(({ elements, appState }) => { updateData({ elements: elements, appState: appState }); }) - .catch(error => console.error(error)); + .catch((error) => console.error(error)); }} /> ), diff --git a/src/actions/actionHistory.tsx b/src/actions/actionHistory.tsx index 1fcdeda3..8daef488 100644 --- a/src/actions/actionHistory.tsx +++ b/src/actions/actionHistory.tsx @@ -35,7 +35,7 @@ const writeData = ( const nextElementMap = getElementMap(nextElements); return { elements: nextElements - .map(nextElement => + .map((nextElement) => newElementWith( prevElementMap[nextElement.id] || nextElement, nextElement, @@ -44,9 +44,9 @@ const writeData = ( .concat( prevElements .filter( - prevElement => !nextElementMap.hasOwnProperty(prevElement.id), + (prevElement) => !nextElementMap.hasOwnProperty(prevElement.id), ) - .map(prevElement => + .map((prevElement) => newElementWith(prevElement, { isDeleted: true }), ), ), @@ -62,7 +62,7 @@ const testUndo = (shift: boolean) => (event: KeyboardEvent) => type ActionCreator = (history: SceneHistory) => Action; -export const createUndoAction: ActionCreator = history => ({ +export const createUndoAction: ActionCreator = (history) => ({ name: "undo", perform: (elements, appState) => writeData(elements, appState, () => history.undoOnce()), @@ -78,7 +78,7 @@ export const createUndoAction: ActionCreator = history => ({ commitToHistory: () => false, }); -export const createRedoAction: ActionCreator = history => ({ +export const createRedoAction: ActionCreator = (history) => ({ name: "redo", perform: (elements, appState) => writeData(elements, appState, () => history.redoOnce()), diff --git a/src/actions/actionProperties.tsx b/src/actions/actionProperties.tsx index c67c1640..5812a612 100644 --- a/src/actions/actionProperties.tsx +++ b/src/actions/actionProperties.tsx @@ -18,7 +18,7 @@ const changeProperty = ( appState: AppState, callback: (element: ExcalidrawElement) => ExcalidrawElement, ) => { - return elements.map(element => { + return elements.map((element) => { if (appState.selectedElementIds[element.id]) { return callback(element); } @@ -26,7 +26,7 @@ const changeProperty = ( }); }; -const getFormValue = function( +const getFormValue = function ( elements: readonly ExcalidrawElement[], appState: AppState, getAttribute: (element: ExcalidrawElement) => T, @@ -46,7 +46,7 @@ export const actionChangeStrokeColor = register({ name: "changeStrokeColor", perform: (elements, appState, value) => { return { - elements: changeProperty(elements, appState, el => + elements: changeProperty(elements, appState, (el) => newElementWith(el, { strokeColor: value, }), @@ -64,7 +64,7 @@ export const actionChangeStrokeColor = register({ color={getFormValue( elements, appState, - element => element.strokeColor, + (element) => element.strokeColor, appState.currentItemStrokeColor, )} onChange={updateData} @@ -77,7 +77,7 @@ export const actionChangeBackgroundColor = register({ name: "changeBackgroundColor", perform: (elements, appState, value) => { return { - elements: changeProperty(elements, appState, el => + elements: changeProperty(elements, appState, (el) => newElementWith(el, { backgroundColor: value, }), @@ -95,7 +95,7 @@ export const actionChangeBackgroundColor = register({ color={getFormValue( elements, appState, - element => element.backgroundColor, + (element) => element.backgroundColor, appState.currentItemBackgroundColor, )} onChange={updateData} @@ -108,7 +108,7 @@ export const actionChangeFillStyle = register({ name: "changeFillStyle", perform: (elements, appState, value) => { return { - elements: changeProperty(elements, appState, el => + elements: changeProperty(elements, appState, (el) => newElementWith(el, { fillStyle: value, }), @@ -130,10 +130,10 @@ export const actionChangeFillStyle = register({ value={getFormValue( elements, appState, - element => element.fillStyle, + (element) => element.fillStyle, appState.currentItemFillStyle, )} - onChange={value => { + onChange={(value) => { updateData(value); }} /> @@ -145,7 +145,7 @@ export const actionChangeStrokeWidth = register({ name: "changeStrokeWidth", perform: (elements, appState, value) => { return { - elements: changeProperty(elements, appState, el => + elements: changeProperty(elements, appState, (el) => newElementWith(el, { strokeWidth: value, }), @@ -167,10 +167,10 @@ export const actionChangeStrokeWidth = register({ value={getFormValue( elements, appState, - element => element.strokeWidth, + (element) => element.strokeWidth, appState.currentItemStrokeWidth, )} - onChange={value => updateData(value)} + onChange={(value) => updateData(value)} /> ), @@ -180,7 +180,7 @@ export const actionChangeSloppiness = register({ name: "changeSloppiness", perform: (elements, appState, value) => { return { - elements: changeProperty(elements, appState, el => + elements: changeProperty(elements, appState, (el) => newElementWith(el, { roughness: value, }), @@ -202,10 +202,10 @@ export const actionChangeSloppiness = register({ value={getFormValue( elements, appState, - element => element.roughness, + (element) => element.roughness, appState.currentItemRoughness, )} - onChange={value => updateData(value)} + onChange={(value) => updateData(value)} /> ), @@ -215,7 +215,7 @@ export const actionChangeOpacity = register({ name: "changeOpacity", perform: (elements, appState, value) => { return { - elements: changeProperty(elements, appState, el => + elements: changeProperty(elements, appState, (el) => newElementWith(el, { opacity: value, }), @@ -232,8 +232,8 @@ export const actionChangeOpacity = register({ min="0" max="100" step="10" - onChange={event => updateData(+event.target.value)} - onWheel={event => { + onChange={(event) => updateData(+event.target.value)} + onWheel={(event) => { event.stopPropagation(); const target = event.target as HTMLInputElement; const STEP = 10; @@ -251,7 +251,7 @@ export const actionChangeOpacity = register({ getFormValue( elements, appState, - element => element.opacity, + (element) => element.opacity, appState.currentItemOpacity, ) ?? undefined } @@ -264,7 +264,7 @@ export const actionChangeFontSize = register({ name: "changeFontSize", perform: (elements, appState, value) => { return { - elements: changeProperty(elements, appState, el => { + elements: changeProperty(elements, appState, (el) => { if (isTextElement(el)) { const element: ExcalidrawTextElement = newElementWith(el, { font: `${value}px ${el.font.split("px ")[1]}`, @@ -298,10 +298,10 @@ export const actionChangeFontSize = register({ value={getFormValue( elements, appState, - element => isTextElement(element) && +element.font.split("px ")[0], + (element) => isTextElement(element) && +element.font.split("px ")[0], +(appState.currentItemFont || DEFAULT_FONT).split("px ")[0], )} - onChange={value => updateData(value)} + onChange={(value) => updateData(value)} /> ), @@ -311,7 +311,7 @@ export const actionChangeFontFamily = register({ name: "changeFontFamily", perform: (elements, appState, value) => { return { - elements: changeProperty(elements, appState, el => { + elements: changeProperty(elements, appState, (el) => { if (isTextElement(el)) { const element: ExcalidrawTextElement = newElementWith(el, { font: `${el.font.split("px ")[0]}px ${value}`, @@ -344,10 +344,10 @@ export const actionChangeFontFamily = register({ value={getFormValue( elements, appState, - element => isTextElement(element) && element.font.split("px ")[1], + (element) => isTextElement(element) && element.font.split("px ")[1], (appState.currentItemFont || DEFAULT_FONT).split("px ")[1], )} - onChange={value => updateData(value)} + onChange={(value) => updateData(value)} /> ), diff --git a/src/actions/actionSelectAll.ts b/src/actions/actionSelectAll.ts index 6ccfd9a8..c5975abb 100644 --- a/src/actions/actionSelectAll.ts +++ b/src/actions/actionSelectAll.ts @@ -16,5 +16,5 @@ export const actionSelectAll = register({ }; }, contextItemLabel: "labels.selectAll", - keyTest: event => event[KEYS.CTRL_OR_CMD] && event.key === "a", + keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === "a", }); diff --git a/src/actions/actionStyles.ts b/src/actions/actionStyles.ts index fb1f431f..ffe041e0 100644 --- a/src/actions/actionStyles.ts +++ b/src/actions/actionStyles.ts @@ -13,7 +13,7 @@ let copiedStyles: string = "{}"; export const actionCopyStyles = register({ name: "copyStyles", perform: (elements, appState) => { - const element = elements.find(el => appState.selectedElementIds[el.id]); + const element = elements.find((el) => appState.selectedElementIds[el.id]); if (element) { copiedStyles = JSON.stringify(element); } @@ -22,7 +22,7 @@ export const actionCopyStyles = register({ }; }, contextItemLabel: "labels.copyStyles", - keyTest: event => + keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === "C", contextMenuOrder: 0, }); @@ -35,7 +35,7 @@ export const actionPasteStyles = register({ return { elements, commitToHistory: false }; } return { - elements: elements.map(element => { + elements: elements.map((element) => { if (appState.selectedElementIds[element.id]) { const newElement = newElementWith(element, { backgroundColor: pastedElement?.backgroundColor, @@ -59,7 +59,7 @@ export const actionPasteStyles = register({ }; }, contextItemLabel: "labels.pasteStyles", - keyTest: event => + keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === "V", contextMenuOrder: 1, }); diff --git a/src/actions/actionZindex.tsx b/src/actions/actionZindex.tsx index 5a481ab3..210e3cd9 100644 --- a/src/actions/actionZindex.tsx +++ b/src/actions/actionZindex.tsx @@ -31,7 +31,7 @@ export const actionSendBackward = register({ }, contextItemLabel: "labels.sendBackward", keyPriority: 40, - keyTest: event => + keyTest: (event) => event[KEYS.CTRL_OR_CMD] && !event.shiftKey && event.code === "BracketLeft", PanelComponent: ({ updateData }) => ( ))} @@ -155,7 +153,7 @@ const Picker = function({ { + onChange={(color) => { onChange(color); }} ref={colorInput} @@ -196,7 +194,7 @@ const ColorInput = React.forwardRef( spellCheck={false} className="color-picker-input" aria-label={label} - onChange={event => { + onChange={(event) => { const value = event.target.value.toLowerCase(); if (value.match(colorRegex)) { onChange(value === "transparent" ? "transparent" : `#${value}`); @@ -204,7 +202,7 @@ const ColorInput = React.forwardRef( setInnerValue(value); }} value={(innerValue || "").replace(/^#/, "")} - onPaste={event => onChange(event.clipboardData.getData("text"))} + onPaste={(event) => onChange(event.clipboardData.getData("text"))} onBlur={() => setInnerValue(color)} ref={inputRef} /> @@ -244,7 +242,7 @@ export function ColorPicker({ { + onChange={(color) => { onChange(color); }} /> @@ -255,7 +253,7 @@ export function ColorPicker({ { + onChange={(changedColor) => { onChange(changedColor); }} onClose={() => { diff --git a/src/components/ContextMenu.tsx b/src/components/ContextMenu.tsx index e2798cfd..e0a0fde7 100644 --- a/src/components/ContextMenu.tsx +++ b/src/components/ContextMenu.tsx @@ -26,7 +26,7 @@ function ContextMenu({ options, onCloseRequest, top, left }: Props) { >
    event.preventDefault()} + onContextMenu={(event) => event.preventDefault()} > {options.map((option, idx) => (
  • @@ -69,7 +69,7 @@ function handleClose() { export default { push(params: ContextMenuParams) { const options = Array.of(); - params.options.forEach(option => { + params.options.forEach((option) => { if (option) { options.push(option); } diff --git a/src/components/ExportDialog.tsx b/src/components/ExportDialog.tsx index ff8cc7f2..bdb450ad 100644 --- a/src/components/ExportDialog.tsx +++ b/src/components/ExportDialog.tsx @@ -152,7 +152,7 @@ function ExportModal({ {actionManager.renderAction("changeProjectName")} - {scales.map(s => ( + {scales.map((s) => ( + onChange={(event) => setExportSelected(event.currentTarget.checked) } ref={onlySelectedInput} diff --git a/src/components/LanguageList.tsx b/src/components/LanguageList.tsx index 009f08db..68c1852f 100644 --- a/src/components/LanguageList.tsx +++ b/src/components/LanguageList.tsx @@ -22,7 +22,7 @@ export function LanguageList({ value={currentLanguage} aria-label={i18n.t("buttons.selectLanguage")} > - {languages.map(language => ( + {languages.map((language) => ( diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx index 8c426489..623d6241 100644 --- a/src/components/LayerUI.tsx +++ b/src/components/LayerUI.tsx @@ -73,7 +73,7 @@ export const LayerUI = React.memo( onExportToPng={createExporter("png")} onExportToSvg={createExporter("svg")} onExportToClipboard={createExporter("clipboard")} - onExportToBackend={exportedElements => { + onExportToBackend={(exportedElements) => { if (canvas) { exportCanvas( "backend", @@ -143,7 +143,7 @@ export const LayerUI = React.memo( )}
    - {heading => ( + {(heading) => ( @@ -184,7 +184,7 @@ export const LayerUI = React.memo(