diff --git a/packages/excalidraw/element/resizeTest.ts b/packages/excalidraw/element/resizeTest.ts index 5fcae53359..c00586db32 100644 --- a/packages/excalidraw/element/resizeTest.ts +++ b/packages/excalidraw/element/resizeTest.ts @@ -20,7 +20,7 @@ import type { AppState, Device, Zoom } from "../types"; import type { Bounds } from "./bounds"; import { getElementAbsoluteCoords } from "./bounds"; import { SIDE_RESIZING_THRESHOLD } from "../constants"; -import { isLinearElement } from "./typeChecks"; +import { isImageElement, isLinearElement } from "./typeChecks"; import type { GlobalPoint, LineSegment, LocalPoint } from "../../math"; import { pointFrom, @@ -90,7 +90,11 @@ export const resizeTest = ( // do not resize from the sides for linear elements with only two points if (!(isLinearElement(element) && element.points.length <= 2)) { - const SPACING = SIDE_RESIZING_THRESHOLD / zoom.value; + const SPACING = isImageElement(element) + ? 0 + : SIDE_RESIZING_THRESHOLD / zoom.value; + const ZOOMED_SIDE_RESIZING_THRESHOLD = + SIDE_RESIZING_THRESHOLD / zoom.value; const sides = getSelectionBorders( pointFrom(x1 - SPACING, y1 - SPACING), pointFrom(x2 + SPACING, y2 + SPACING), @@ -104,7 +108,7 @@ export const resizeTest = ( pointOnLineSegment( pointFrom(x, y), side as LineSegment, - SPACING, + ZOOMED_SIDE_RESIZING_THRESHOLD, ) ) { return dir as TransformHandleType; diff --git a/packages/excalidraw/element/transformHandles.ts b/packages/excalidraw/element/transformHandles.ts index ccd68b2828..77a83e3e1e 100644 --- a/packages/excalidraw/element/transformHandles.ts +++ b/packages/excalidraw/element/transformHandles.ts @@ -11,6 +11,7 @@ import type { Device, InteractiveCanvasAppState, Zoom } from "../types"; import { isElbowArrow, isFrameLikeElement, + isImageElement, isLinearElement, } from "./typeChecks"; import { @@ -129,6 +130,7 @@ export const getTransformHandlesFromCoords = ( pointerType: PointerType, omitSides: { [T in TransformHandleType]?: boolean } = {}, margin = 4, + spacing = DEFAULT_TRANSFORM_HANDLE_SPACING, ): TransformHandles => { const size = transformHandleSizes[pointerType]; const handleWidth = size / zoom.value; @@ -140,8 +142,7 @@ export const getTransformHandlesFromCoords = ( const width = x2 - x1; const height = y2 - y1; const dashedLineMargin = margin / zoom.value; - const centeringOffset = - (size - DEFAULT_TRANSFORM_HANDLE_SPACING * 2) / (2 * zoom.value); + const centeringOffset = (size - spacing * 2) / (2 * zoom.value); const transformHandles: TransformHandles = { nw: omitSides.nw @@ -301,8 +302,10 @@ export const getTransformHandles = ( rotation: true, }; } - const dashedLineMargin = isLinearElement(element) + const margin = isLinearElement(element) ? DEFAULT_TRANSFORM_HANDLE_SPACING + 8 + : isImageElement(element) + ? 0 : DEFAULT_TRANSFORM_HANDLE_SPACING; return getTransformHandlesFromCoords( getElementAbsoluteCoords(element, elementsMap, true), @@ -310,7 +313,8 @@ export const getTransformHandles = ( zoom, pointerType, omitSides, - dashedLineMargin, + margin, + isImageElement(element) ? 0 : undefined, ); }; diff --git a/packages/excalidraw/renderer/interactiveScene.ts b/packages/excalidraw/renderer/interactiveScene.ts index e7774893e1..758145ba19 100644 --- a/packages/excalidraw/renderer/interactiveScene.ts +++ b/packages/excalidraw/renderer/interactiveScene.ts @@ -950,7 +950,11 @@ const _renderInteractiveScene = ({ activeEmbeddable: appState.activeEmbeddable?.element === element && appState.activeEmbeddable.state === "active", - padding: element.id === appState.croppingElementId ? 0 : undefined, + padding: + element.id === appState.croppingElementId || + isImageElement(element) + ? 0 + : undefined, }); } }