From af428d472c2f307d2c7f58f045d1a80c682f3324 Mon Sep 17 00:00:00 2001 From: Mark Tolmacs Date: Fri, 2 May 2025 13:57:08 +0200 Subject: [PATCH] Fix lint issues --- .../excalidraw/components/Stats/Angle.tsx | 7 +- .../excalidraw/components/Stats/Dimension.tsx | 6 +- .../excalidraw/components/Stats/DragInput.tsx | 2 +- .../excalidraw/components/Stats/FontSize.tsx | 2 +- .../components/Stats/MultiAngle.tsx | 6 +- .../components/Stats/MultiDimension.tsx | 2 +- .../components/Stats/MultiPosition.tsx | 4 +- .../excalidraw/components/Stats/Position.tsx | 7 +- packages/excalidraw/components/Stats/utils.ts | 246 +++++++++--------- 9 files changed, 146 insertions(+), 136 deletions(-) diff --git a/packages/excalidraw/components/Stats/Angle.tsx b/packages/excalidraw/components/Stats/Angle.tsx index 38ccdc49e..58d393e1a 100644 --- a/packages/excalidraw/components/Stats/Angle.tsx +++ b/packages/excalidraw/components/Stats/Angle.tsx @@ -12,7 +12,12 @@ import type Scene from "@excalidraw/element/Scene"; import { angleIcon } from "../icons"; import DragInput from "./DragInput"; -import { DragInputCallbackType, getStepSizedValue, isPropertyEditable, updateBindings } from "./utils"; +import { + type DragInputCallbackType, + getStepSizedValue, + isPropertyEditable, + updateBindings, +} from "./utils"; import type { AppState } from "../../types"; diff --git a/packages/excalidraw/components/Stats/Dimension.tsx b/packages/excalidraw/components/Stats/Dimension.tsx index e0d7c8d8b..2b5659bf5 100644 --- a/packages/excalidraw/components/Stats/Dimension.tsx +++ b/packages/excalidraw/components/Stats/Dimension.tsx @@ -13,7 +13,11 @@ import type { ExcalidrawElement } from "@excalidraw/element/types"; import type Scene from "@excalidraw/element/Scene"; import DragInput from "./DragInput"; -import { DragInputCallbackType, getStepSizedValue, isPropertyEditable } from "./utils"; +import { + type DragInputCallbackType, + getStepSizedValue, + isPropertyEditable, +} from "./utils"; import type { AppState } from "../../types"; diff --git a/packages/excalidraw/components/Stats/DragInput.tsx b/packages/excalidraw/components/Stats/DragInput.tsx index 1ef8ee299..730f4f312 100644 --- a/packages/excalidraw/components/Stats/DragInput.tsx +++ b/packages/excalidraw/components/Stats/DragInput.tsx @@ -13,7 +13,7 @@ import { CaptureUpdateAction } from "../../store"; import { useApp } from "../App"; import { InlineIcon } from "../InlineIcon"; -import { DragInputCallbackType, SMALLEST_DELTA } from "./utils"; +import { type DragInputCallbackType, SMALLEST_DELTA } from "./utils"; import "./DragInput.scss"; diff --git a/packages/excalidraw/components/Stats/FontSize.tsx b/packages/excalidraw/components/Stats/FontSize.tsx index 22324f93f..3a4c80fb4 100644 --- a/packages/excalidraw/components/Stats/FontSize.tsx +++ b/packages/excalidraw/components/Stats/FontSize.tsx @@ -17,7 +17,7 @@ import type Scene from "@excalidraw/element/Scene"; import { fontSizeIcon } from "../icons"; import StatsDragInput from "./DragInput"; -import { DragInputCallbackType, getStepSizedValue } from "./utils"; +import { type DragInputCallbackType, getStepSizedValue } from "./utils"; import type { AppState } from "../../types"; diff --git a/packages/excalidraw/components/Stats/MultiAngle.tsx b/packages/excalidraw/components/Stats/MultiAngle.tsx index e4ef720a4..2ef43c994 100644 --- a/packages/excalidraw/components/Stats/MultiAngle.tsx +++ b/packages/excalidraw/components/Stats/MultiAngle.tsx @@ -14,7 +14,11 @@ import type Scene from "@excalidraw/element/Scene"; import { angleIcon } from "../icons"; import DragInput from "./DragInput"; -import { DragInputCallbackType, getStepSizedValue, isPropertyEditable } from "./utils"; +import { + type DragInputCallbackType, + getStepSizedValue, + isPropertyEditable, +} from "./utils"; import type { AppState } from "../../types"; diff --git a/packages/excalidraw/components/Stats/MultiDimension.tsx b/packages/excalidraw/components/Stats/MultiDimension.tsx index e4ced05a2..711589582 100644 --- a/packages/excalidraw/components/Stats/MultiDimension.tsx +++ b/packages/excalidraw/components/Stats/MultiDimension.tsx @@ -26,7 +26,7 @@ import type Scene from "@excalidraw/element/Scene"; import DragInput from "./DragInput"; import { getAtomicUnits, getStepSizedValue, isPropertyEditable } from "./utils"; -import { DragInputCallbackType, getElementsInAtomicUnit } from "./utils"; +import { type DragInputCallbackType, getElementsInAtomicUnit } from "./utils"; import type { AtomicUnit } from "./utils"; import type { AppState } from "../../types"; diff --git a/packages/excalidraw/components/Stats/MultiPosition.tsx b/packages/excalidraw/components/Stats/MultiPosition.tsx index 10b6bd277..165e420c3 100644 --- a/packages/excalidraw/components/Stats/MultiPosition.tsx +++ b/packages/excalidraw/components/Stats/MultiPosition.tsx @@ -10,10 +10,8 @@ import type Scene from "@excalidraw/element/Scene"; import StatsDragInput from "./DragInput"; import { handlePositionChange } from "./utils"; -import type { AtomicUnit } from "./utils"; import type { AppState } from "../../types"; -import { getFrameChildren } from "@excalidraw/element/frame"; -import { isFrameLikeElement } from "@excalidraw/element/typeChecks"; +import type { AtomicUnit } from "./utils"; interface MultiPositionProps { property: "x" | "y"; diff --git a/packages/excalidraw/components/Stats/Position.tsx b/packages/excalidraw/components/Stats/Position.tsx index 1968bd2a9..0b2ba2984 100644 --- a/packages/excalidraw/components/Stats/Position.tsx +++ b/packages/excalidraw/components/Stats/Position.tsx @@ -1,9 +1,7 @@ import { pointFrom, pointRotateRads, round } from "@excalidraw/math"; -import { - getFlipAdjustedCropPosition, -} from "@excalidraw/element/cropElement"; -import { isFrameLikeElement, isImageElement } from "@excalidraw/element/typeChecks"; +import { getFlipAdjustedCropPosition } from "@excalidraw/element/cropElement"; +import { isImageElement } from "@excalidraw/element/typeChecks"; import type { ElementsMap, ExcalidrawElement } from "@excalidraw/element/types"; @@ -13,7 +11,6 @@ import StatsDragInput from "./DragInput"; import { handlePositionChange } from "./utils"; import type { AppState } from "../../types"; -import { getFrameChildren } from "@excalidraw/element/frame"; interface PositionProps { property: "x" | "y"; diff --git a/packages/excalidraw/components/Stats/utils.ts b/packages/excalidraw/components/Stats/utils.ts index ffd2faa52..8e383046e 100644 --- a/packages/excalidraw/components/Stats/utils.ts +++ b/packages/excalidraw/components/Stats/utils.ts @@ -7,7 +7,6 @@ import { import { getBoundTextElement } from "@excalidraw/element/textElement"; import { getCommonBounds } from "@excalidraw/element/bounds"; import { - isFrameChildElement, isFrameLikeElement, isLinearElement, isTextElement, @@ -19,6 +18,8 @@ import { isInGroup, } from "@excalidraw/element/groups"; +import { getFrameChildren } from "@excalidraw/element/frame"; + import type { Radians } from "@excalidraw/math"; import type { @@ -30,7 +31,6 @@ import type { import type Scene from "@excalidraw/element/Scene"; import type { AppState } from "../../types"; -import { getFrameChildren } from "@excalidraw/element/frame"; export type StatsInputProperty = | "x" @@ -93,9 +93,9 @@ export const getElementsInAtomicUnit = ( latest: elementsMap.get(id), })) .filter((el) => el.original !== undefined && el.latest !== undefined) as { - original: NonDeletedExcalidrawElement; - latest: NonDeletedExcalidrawElement; - }[]; + original: NonDeletedExcalidrawElement; + latest: NonDeletedExcalidrawElement; + }[]; }; export const newOrigin = ( @@ -194,57 +194,61 @@ export const moveElement = ( } if (isFrameLikeElement(originalElement)) { - getFrameChildren(originalElementsMap, originalElement.id).forEach(child => { - const latestChildElement = elementsMap.get(child.id); + getFrameChildren(originalElementsMap, originalElement.id).forEach( + (child) => { + const latestChildElement = elementsMap.get(child.id); - if (!latestChildElement) return; + if (!latestChildElement) { + return; + } - const [childCX, childCY] = [ - child.x + child.width / 2, - child.y + child.height / 2, - ]; - const [childTopLeftX, childTopLeftY] = pointRotateRads( - pointFrom(child.x, child.y), - pointFrom(childCX, childCY), - child.angle, - ); + const [childCX, childCY] = [ + child.x + child.width / 2, + child.y + child.height / 2, + ]; + const [childTopLeftX, childTopLeftY] = pointRotateRads( + pointFrom(child.x, child.y), + pointFrom(childCX, childCY), + child.angle, + ); - const childNewTopLeftX = Math.round(childTopLeftX + changeInX); - const childNewTopLeftY = Math.round(childTopLeftY + changeInY); + const childNewTopLeftX = Math.round(childTopLeftX + changeInX); + const childNewTopLeftY = Math.round(childTopLeftY + changeInY); - const [childX, childY] = pointRotateRads( - pointFrom(childNewTopLeftX, childNewTopLeftY), - pointFrom(childCX + changeInX, childCY + changeInY), - -child.angle as Radians, - ); + const [childX, childY] = pointRotateRads( + pointFrom(childNewTopLeftX, childNewTopLeftY), + pointFrom(childCX + changeInX, childCY + changeInY), + -child.angle as Radians, + ); - scene.mutateElement( - latestChildElement, - { - x: childX, - y: childY, - }, - { informMutation: shouldInformMutation, isDragging: false }, - ); - updateBindings(latestChildElement, scene); + scene.mutateElement( + latestChildElement, + { + x: childX, + y: childY, + }, + { informMutation: shouldInformMutation, isDragging: false }, + ); + updateBindings(latestChildElement, scene); - const boundTextElement = getBoundTextElement( - latestChildElement, - originalElementsMap, - ); - if (boundTextElement) { - const latestBoundTextElement = elementsMap.get(boundTextElement.id); - latestBoundTextElement && - scene.mutateElement( - latestBoundTextElement, - { - x: boundTextElement.x + changeInX, - y: boundTextElement.y + changeInY, - }, - { informMutation: shouldInformMutation, isDragging: false }, - ); - } - }) + const boundTextElement = getBoundTextElement( + latestChildElement, + originalElementsMap, + ); + if (boundTextElement) { + const latestBoundTextElement = elementsMap.get(boundTextElement.id); + latestBoundTextElement && + scene.mutateElement( + latestBoundTextElement, + { + x: boundTextElement.x + changeInX, + y: boundTextElement.y + changeInY, + }, + { informMutation: shouldInformMutation, isDragging: false }, + ); + } + }, + ); } }; @@ -368,9 +372,7 @@ export const updateBindings = ( } }; -export const handlePositionChange: DragInputCallbackType< - "x" | "y" -> = ({ +export const handlePositionChange: DragInputCallbackType<"x" | "y"> = ({ accumulatedChange, originalElements, originalElementsMap, @@ -380,86 +382,86 @@ export const handlePositionChange: DragInputCallbackType< scene, originalAppState, }) => { - const STEP_SIZE = 10; - const elementsMap = scene.getNonDeletedElementsMap(); + const STEP_SIZE = 10; + const elementsMap = scene.getNonDeletedElementsMap(); - if (nextValue !== undefined) { - for (const atomicUnit of getAtomicUnits( - originalElements, - originalAppState, - )) { - const elementsInUnit = getElementsInAtomicUnit( - atomicUnit, - elementsMap, - originalElementsMap, + if (nextValue !== undefined) { + for (const atomicUnit of getAtomicUnits( + originalElements, + originalAppState, + )) { + const elementsInUnit = getElementsInAtomicUnit( + atomicUnit, + elementsMap, + originalElementsMap, + ); + + if (elementsInUnit.length > 1) { + const [x1, y1, ,] = getCommonBounds( + elementsInUnit.map((el) => el.latest!), ); + const newTopLeftX = property === "x" ? nextValue : x1; + const newTopLeftY = property === "y" ? nextValue : y1; - if (elementsInUnit.length > 1) { - const [x1, y1, ,] = getCommonBounds( - elementsInUnit.map((el) => el.latest!), + moveGroup( + newTopLeftX, + newTopLeftY, + elementsInUnit.map((el) => el.original), + originalElementsMap, + scene, + ); + } else { + const origElement = elementsInUnit[0]?.original; + const latestElement = elementsInUnit[0]?.latest; + if ( + origElement && + latestElement && + isPropertyEditable(latestElement, property) + ) { + const [cx, cy] = [ + origElement.x + origElement.width / 2, + origElement.y + origElement.height / 2, + ]; + const [topLeftX, topLeftY] = pointRotateRads( + pointFrom(origElement.x, origElement.y), + pointFrom(cx, cy), + origElement.angle, ); - const newTopLeftX = property === "x" ? nextValue : x1; - const newTopLeftY = property === "y" ? nextValue : y1; - moveGroup( + const newTopLeftX = property === "x" ? nextValue : topLeftX; + const newTopLeftY = property === "y" ? nextValue : topLeftY; + + moveElement( newTopLeftX, newTopLeftY, - elementsInUnit.map((el) => el.original), - originalElementsMap, + origElement, scene, + originalElementsMap, + false, ); - } else { - const origElement = elementsInUnit[0]?.original; - const latestElement = elementsInUnit[0]?.latest; - if ( - origElement && - latestElement && - isPropertyEditable(latestElement, property) - ) { - const [cx, cy] = [ - origElement.x + origElement.width / 2, - origElement.y + origElement.height / 2, - ]; - const [topLeftX, topLeftY] = pointRotateRads( - pointFrom(origElement.x, origElement.y), - pointFrom(cx, cy), - origElement.angle, - ); - - const newTopLeftX = property === "x" ? nextValue : topLeftX; - const newTopLeftY = property === "y" ? nextValue : topLeftY; - - moveElement( - newTopLeftX, - newTopLeftY, - origElement, - scene, - originalElementsMap, - false, - ); - } } } - - scene.triggerUpdate(); - return; } - const change = shouldChangeByStepSize - ? getStepSizedValue(accumulatedChange, STEP_SIZE) - : accumulatedChange; - - const changeInTopX = property === "x" ? change : 0; - const changeInTopY = property === "y" ? change : 0; - - moveElements( - property, - changeInTopX, - changeInTopY, - originalElements, - originalElementsMap, - scene, - ); - scene.triggerUpdate(); - }; + return; + } + + const change = shouldChangeByStepSize + ? getStepSizedValue(accumulatedChange, STEP_SIZE) + : accumulatedChange; + + const changeInTopX = property === "x" ? change : 0; + const changeInTopY = property === "y" ? change : 0; + + moveElements( + property, + changeInTopX, + changeInTopY, + originalElements, + originalElementsMap, + scene, + ); + + scene.triggerUpdate(); +};