From e05acd6fd9b58c9a750319b6e3f226c50188bcf3 Mon Sep 17 00:00:00 2001 From: Lipis Date: Fri, 6 Nov 2020 22:06:30 +0200 Subject: [PATCH] Update ESLint rules (#2342) --- .eslintrc.json | 27 ++++++++----- src/actions/actionDuplicateSelection.tsx | 10 ++--- src/actions/actionFinalize.tsx | 4 +- src/colors.ts | 26 ++++++------- src/components/App.tsx | 48 +++++++++++------------- src/components/ButtonIconSelect.tsx | 2 +- src/components/ButtonSelect.tsx | 2 +- src/components/ColorPicker.tsx | 8 ++-- src/element/dragElements.ts | 3 +- src/element/newElement.ts | 3 +- src/element/resizeElements.ts | 2 +- src/element/transformHandles.ts | 26 ++++++------- src/packages/utils/README.md | 8 +++- src/utils.ts | 20 +++++----- src/zindex.ts | 19 +++++----- 15 files changed, 107 insertions(+), 101 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index c53d24e2..bda4066f 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,9 +1,10 @@ { - "extends": ["prettier", "react-app", "react-app/jest"], + "extends": ["prettier", "react-app"], "plugins": ["prettier"], "rules": { - "import/no-anonymous-default-export": "off", "curly": "warn", + "dot-notation": "warn", + "import/no-anonymous-default-export": "off", "no-console": [ "warn", { @@ -11,7 +12,20 @@ } ], "no-else-return": "warn", + "no-lonely-if": "warn", + "no-restricted-syntax": [ + "warn", + { + "message": "Use 't(...)' instead of literal text in JSX", + "selector": "JSXText[value=/\\w/]" + } + ], + "no-unneeded-ternary": "warn", + "no-unused-expressions": "warn", + "no-unused-vars": "warn", "no-useless-return": "warn", + "one-var": ["warn", "never"], + "prefer-arrow-callback": "warn", "prefer-const": [ "warn", { @@ -19,13 +33,6 @@ } ], "prefer-template": "warn", - "prettier/prettier": "warn", - "no-restricted-syntax": [ - "warn", - { - "selector": "JSXText[value=/\\w/]", - "message": "Use 't(...)' instead of literal text in JSX" - } - ] + "prettier/prettier": "warn" } } diff --git a/src/actions/actionDuplicateSelection.tsx b/src/actions/actionDuplicateSelection.tsx index e0c8810c..5a43376e 100644 --- a/src/actions/actionDuplicateSelection.tsx +++ b/src/actions/actionDuplicateSelection.tsx @@ -105,9 +105,9 @@ const duplicateElements = ( const finalElements: ExcalidrawElement[] = []; - let i = 0; - while (i < elements.length) { - const element = elements[i]; + let index = 0; + while (index < elements.length) { + const element = elements[index]; if (appState.selectedElementIds[element.id]) { if (element.groupIds.length) { const groupId = getSelectedGroupForElement(appState, element); @@ -120,7 +120,7 @@ const duplicateElements = ( duplicateAndOffsetElement(element), ), ); - i = i + groupElements.length; + index = index + groupElements.length; continue; } } @@ -128,7 +128,7 @@ const duplicateElements = ( } else { finalElements.push(element); } - i++; + index++; } fixBindingsAfterDuplication(finalElements, oldElements, oldIdToDuplicatedId); diff --git a/src/actions/actionFinalize.tsx b/src/actions/actionFinalize.tsx index 7c70e10e..67f4da88 100644 --- a/src/actions/actionFinalize.tsx +++ b/src/actions/actionFinalize.tsx @@ -92,8 +92,8 @@ export const actionFinalize = register({ const linePoints = multiPointElement.points; const firstPoint = linePoints[0]; mutateElement(multiPointElement, { - points: linePoints.map((point, i) => - i === linePoints.length - 1 + points: linePoints.map((point, index) => + index === linePoints.length - 1 ? ([firstPoint[0], firstPoint[1]] as const) : point, ), diff --git a/src/colors.ts b/src/colors.ts index 16301c85..63cd7283 100644 --- a/src/colors.ts +++ b/src/colors.ts @@ -1,18 +1,18 @@ import oc from "open-color"; -const shades = (i: number) => [ - oc.red[i], - oc.pink[i], - oc.grape[i], - oc.violet[i], - oc.indigo[i], - oc.blue[i], - oc.cyan[i], - oc.teal[i], - oc.green[i], - oc.lime[i], - oc.yellow[i], - oc.orange[i], +const shades = (index: number) => [ + oc.red[index], + oc.pink[index], + oc.grape[index], + oc.violet[index], + oc.indigo[index], + oc.blue[index], + oc.cyan[index], + oc.teal[index], + oc.green[index], + oc.lime[index], + oc.yellow[index], + oc.orange[index], ]; export default { diff --git a/src/components/App.tsx b/src/components/App.tsx index 0b2c3180..f0ca4e5e 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -2146,35 +2146,31 @@ class App extends React.Component { // in this branch, we're inside the commit zone, and no uncommitted // point exists. Thus do nothing (don't add/remove points). } + } else if ( + points.length > 2 && + lastCommittedPoint && + distance2d( + scenePointerX - rx, + scenePointerY - ry, + lastCommittedPoint[0], + lastCommittedPoint[1], + ) < LINE_CONFIRM_THRESHOLD + ) { + document.documentElement.style.cursor = CURSOR_TYPE.POINTER; + mutateElement(multiElement, { + points: points.slice(0, -1), + }); } else { - // cursor moved inside commit zone, and there's uncommitted point, - // thus remove it - if ( - points.length > 2 && - lastCommittedPoint && - distance2d( - scenePointerX - rx, - scenePointerY - ry, - lastCommittedPoint[0], - lastCommittedPoint[1], - ) < LINE_CONFIRM_THRESHOLD - ) { + if (isPathALoop(points)) { document.documentElement.style.cursor = CURSOR_TYPE.POINTER; - mutateElement(multiElement, { - points: points.slice(0, -1), - }); - } else { - if (isPathALoop(points)) { - document.documentElement.style.cursor = CURSOR_TYPE.POINTER; - } - // update last uncommitted point - mutateElement(multiElement, { - points: [ - ...points.slice(0, -1), - [scenePointerX - rx, scenePointerY - ry], - ], - }); } + // update last uncommitted point + mutateElement(multiElement, { + points: [ + ...points.slice(0, -1), + [scenePointerX - rx, scenePointerY - ry], + ], + }); } return; diff --git a/src/components/ButtonIconSelect.tsx b/src/components/ButtonIconSelect.tsx index 74d2e018..dce2ed34 100644 --- a/src/components/ButtonIconSelect.tsx +++ b/src/components/ButtonIconSelect.tsx @@ -24,7 +24,7 @@ export const ButtonIconSelect = ({ type="radio" name={group} onChange={() => onChange(option.value)} - checked={value === option.value ? true : false} + checked={value === option.value} /> {option.icon} diff --git a/src/components/ButtonSelect.tsx b/src/components/ButtonSelect.tsx index 0d58d2fe..42d1fdf1 100644 --- a/src/components/ButtonSelect.tsx +++ b/src/components/ButtonSelect.tsx @@ -22,7 +22,7 @@ export const ButtonSelect = ({ type="radio" name={group} onChange={() => onChange(option.value)} - checked={value === option.value ? true : false} + checked={value === option.value} /> {option.text} diff --git a/src/components/ColorPicker.tsx b/src/components/ColorPicker.tsx index 1ed9bf1b..9272194a 100644 --- a/src/components/ColorPicker.tsx +++ b/src/components/ColorPicker.tsx @@ -78,11 +78,9 @@ const Picker = ({ colorInput.current?.focus(); event.preventDefault(); } - } else { - if (activeElement === colorInput.current) { - firstItem.current?.focus(); - event.preventDefault(); - } + } else if (activeElement === colorInput.current) { + firstItem.current?.focus(); + event.preventDefault(); } } else if ( event.key === KEYS.ARROW_RIGHT || diff --git a/src/element/dragElements.ts b/src/element/dragElements.ts index abab1eaf..796e1530 100644 --- a/src/element/dragElements.ts +++ b/src/element/dragElements.ts @@ -20,7 +20,8 @@ export const dragSelectedElements = ( const [x1, y1] = getCommonBounds(selectedElements); const offset = { x: pointerX - x1, y: pointerY - y1 }; selectedElements.forEach((element) => { - let x, y; + let x: number; + let y: number; if (lockDirection) { const lockX = lockDirection && distanceX < distanceY; const lockY = lockDirection && distanceX > distanceY; diff --git a/src/element/newElement.ts b/src/element/newElement.ts index b025e403..42254836 100644 --- a/src/element/newElement.ts +++ b/src/element/newElement.ts @@ -150,7 +150,8 @@ const getAdjustedDimensions = ( } = measureText(nextText, getFontString(element)); const { textAlign, verticalAlign } = element; - let x, y; + let x: number; + let y: number; if (textAlign === "center" && verticalAlign === "middle") { const prevMetrics = measureText(element.text, getFontString(element)); diff --git a/src/element/resizeElements.ts b/src/element/resizeElements.ts index f4041062..83e9e3de 100644 --- a/src/element/resizeElements.ts +++ b/src/element/resizeElements.ts @@ -327,7 +327,7 @@ const resizeSingleTextElement = ( cy, -element.angle, ); - let scale; + let scale: number; switch (transformHandleType) { case "se": scale = Math.max( diff --git a/src/element/transformHandles.ts b/src/element/transformHandles.ts index a6850ca3..195581ee 100644 --- a/src/element/transformHandles.ts +++ b/src/element/transformHandles.ts @@ -98,7 +98,7 @@ export const getTransformHandlesFromCoords = ( const centeringOffset = (size - 8) / (2 * zoom.value); const transformHandles: TransformHandles = { - nw: omitSides["nw"] + nw: omitSides.nw ? undefined : generateTransformHandle( x1 - dashedLineMargin - handleMarginX + centeringOffset, @@ -109,7 +109,7 @@ export const getTransformHandlesFromCoords = ( cy, angle, ), - ne: omitSides["ne"] + ne: omitSides.ne ? undefined : generateTransformHandle( x2 + dashedLineMargin - centeringOffset, @@ -120,7 +120,7 @@ export const getTransformHandlesFromCoords = ( cy, angle, ), - sw: omitSides["sw"] + sw: omitSides.sw ? undefined : generateTransformHandle( x1 - dashedLineMargin - handleMarginX + centeringOffset, @@ -131,7 +131,7 @@ export const getTransformHandlesFromCoords = ( cy, angle, ), - se: omitSides["se"] + se: omitSides.se ? undefined : generateTransformHandle( x2 + dashedLineMargin - centeringOffset, @@ -142,7 +142,7 @@ export const getTransformHandlesFromCoords = ( cy, angle, ), - rotation: omitSides["rotation"] + rotation: omitSides.rotation ? undefined : generateTransformHandle( x1 + width / 2 - handleWidth / 2, @@ -162,8 +162,8 @@ export const getTransformHandlesFromCoords = ( // We only want to show height handles (all cardinal directions) above a certain size const minimumSizeForEightHandles = (5 * size) / zoom.value; if (Math.abs(width) > minimumSizeForEightHandles) { - if (!omitSides["n"]) { - transformHandles["n"] = generateTransformHandle( + if (!omitSides.n) { + transformHandles.n = generateTransformHandle( x1 + width / 2 - handleWidth / 2, y1 - dashedLineMargin - handleMarginY + centeringOffset, handleWidth, @@ -173,8 +173,8 @@ export const getTransformHandlesFromCoords = ( angle, ); } - if (!omitSides["s"]) { - transformHandles["s"] = generateTransformHandle( + if (!omitSides.s) { + transformHandles.s = generateTransformHandle( x1 + width / 2 - handleWidth / 2, y2 + dashedLineMargin - centeringOffset, handleWidth, @@ -186,8 +186,8 @@ export const getTransformHandlesFromCoords = ( } } if (Math.abs(height) > minimumSizeForEightHandles) { - if (!omitSides["w"]) { - transformHandles["w"] = generateTransformHandle( + if (!omitSides.w) { + transformHandles.w = generateTransformHandle( x1 - dashedLineMargin - handleMarginX + centeringOffset, y1 + height / 2 - handleHeight / 2, handleWidth, @@ -197,8 +197,8 @@ export const getTransformHandlesFromCoords = ( angle, ); } - if (!omitSides["e"]) { - transformHandles["e"] = generateTransformHandle( + if (!omitSides.e) { + transformHandles.e = generateTransformHandle( x2 + dashedLineMargin - centeringOffset, y1 + height / 2 - handleHeight / 2, handleWidth, diff --git a/src/packages/utils/README.md b/src/packages/utils/README.md index d1fe9e29..204cab5d 100644 --- a/src/packages/utils/README.md +++ b/src/packages/utils/README.md @@ -2,11 +2,15 @@ ## Install - npm i @excalidraw/utils +```bash +npm install @excalidraw/utils +``` If you prefer Yarn over npm, use this command to install the Excalidraw utils package: - yarn add @excalidraw/utils +```bashs +yarn add @excalidraw/utils +``` ## API diff --git a/src/utils.ts b/src/utils.ts index 90396859..a494b1d3 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -240,9 +240,7 @@ const RE_RTL_CHECK = new RegExp(`^[^${RS_LTR_CHARS}]*[${RS_RTL_CHARS}]`); * RTL. * See https://github.com/excalidraw/excalidraw/pull/1722#discussion_r436340171 */ -export const isRTL = (text: string) => { - return RE_RTL_CHECK.test(text); -}; +export const isRTL = (text: string) => RE_RTL_CHECK.test(text); export function tupleToCoors( xyTuple: readonly [number, number], @@ -268,10 +266,10 @@ export const findIndex = ( fromIndex = array.length + fromIndex; } fromIndex = Math.min(array.length, Math.max(fromIndex, 0)); - let i = fromIndex - 1; - while (++i < array.length) { - if (cb(array[i], i, array)) { - return i; + let index = fromIndex - 1; + while (++index < array.length) { + if (cb(array[index], index, array)) { + return index; } } return -1; @@ -286,10 +284,10 @@ export const findLastIndex = ( fromIndex = array.length + fromIndex; } fromIndex = Math.min(array.length - 1, Math.max(fromIndex, 0)); - let i = fromIndex + 1; - while (--i > -1) { - if (cb(array[i], i, array)) { - return i; + let index = fromIndex + 1; + while (--index > -1) { + if (cb(array[index], index, array)) { + return index; } } return -1; diff --git a/src/zindex.ts b/src/zindex.ts index 9a946ac5..2e629158 100644 --- a/src/zindex.ts +++ b/src/zindex.ts @@ -15,18 +15,18 @@ const getIndicesToMove = ( let selectedIndices: number[] = []; let deletedIndices: number[] = []; let includeDeletedIndex = null; - let i = -1; - while (++i < elements.length) { - if (appState.selectedElementIds[elements[i].id]) { + let index = -1; + while (++index < elements.length) { + if (appState.selectedElementIds[elements[index].id]) { if (deletedIndices.length) { selectedIndices = selectedIndices.concat(deletedIndices); deletedIndices = []; } - selectedIndices.push(i); - includeDeletedIndex = i + 1; - } else if (elements[i].isDeleted && includeDeletedIndex === i) { - includeDeletedIndex = i + 1; - deletedIndices.push(i); + selectedIndices.push(index); + includeDeletedIndex = index + 1; + } else if (elements[index].isDeleted && includeDeletedIndex === index) { + includeDeletedIndex = index + 1; + deletedIndices.push(index); } else { deletedIndices = []; } @@ -187,7 +187,8 @@ const shiftElementsToEnd = ( const targetElements: ExcalidrawElement[] = []; const displacedElements: ExcalidrawElement[] = []; - let leadingIndex, trailingIndex; + let leadingIndex: number; + let trailingIndex: number; if (direction === "left") { if (appState.editingGroupId) { const groupElements = getElementsInGroup(