From b5610a634c78db600fcf113fd36fd9c247b2e3d8 Mon Sep 17 00:00:00 2001 From: Federico Ruggi <1081051+ruggi@users.noreply.github.com> Date: Thu, 28 Sep 2023 18:13:54 +0200 Subject: [PATCH 1/2] more tolerante safe gaps --- editor/src/components/canvas/controls/bounding-box-hooks.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/editor/src/components/canvas/controls/bounding-box-hooks.ts b/editor/src/components/canvas/controls/bounding-box-hooks.ts index 6c3b277e6abf..e3b1dd503a9a 100644 --- a/editor/src/components/canvas/controls/bounding-box-hooks.ts +++ b/editor/src/components/canvas/controls/bounding-box-hooks.ts @@ -41,7 +41,8 @@ export function useBoundingBox( } export const SmallElementSize = 20 -export const RESIZE_CONTROL_SAFE_GAP = 6 // safe gap applied when the dimension of an element is smaller than SmallElementSize +export const SafeGapSmallElementSize = 12 +export const RESIZE_CONTROL_SAFE_GAP = 4 // safe gap applied when the dimension of an element is smaller than SmallElementSize function useBoundingBoxFromMetadataRef( selectedElements: ReadonlyArray, @@ -60,7 +61,7 @@ function useBoundingBoxFromMetadataRef( const shouldApplySafeGap = React.useCallback( (dimension: number, scale: number): boolean => { - return isNotDuringInteraction && dimension <= SmallElementSize / scale + return isNotDuringInteraction && dimension <= SafeGapSmallElementSize / scale }, [isNotDuringInteraction], ) From f0b39c516304a72d35a26bcca33221ff6e52b438 Mon Sep 17 00:00:00 2001 From: Federico Ruggi <1081051+ruggi@users.noreply.github.com> Date: Thu, 28 Sep 2023 18:19:19 +0200 Subject: [PATCH 2/2] adjust test --- ...ze-bounding-box-strategy.spec.browser2.tsx | 22 +++++++++++-------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.spec.browser2.tsx index c046cd7e65b3..ce963375d378 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.spec.browser2.tsx +++ b/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.spec.browser2.tsx @@ -68,7 +68,11 @@ import { isRight } from '../../../../core/shared/either' import { ImmediateParentOutlinesTestId } from '../../controls/parent-outlines' import { ImmediateParentBoundsTestId } from '../../controls/parent-bounds' import { getResizeControl, resizeElement } from './absolute-resize.test-utils' -import { RESIZE_CONTROL_SAFE_GAP, SmallElementSize } from '../../controls/bounding-box-hooks' +import { + RESIZE_CONTROL_SAFE_GAP, + SafeGapSmallElementSize, + SmallElementSize, +} from '../../controls/bounding-box-hooks' // no mouseup here! it starts the interaction and resizes with drag delta async function startDragUsingActions( @@ -2924,8 +2928,8 @@ describe('Absolute Resize Group-like behaviors', () => { describe('Absolute Resize Control', () => { describe('safe gap', () => { it('Resize control is placed on small elements outside of the draggable frame area, with a safe gap', async () => { - const width = SmallElementSize - const height = SmallElementSize + const width = SafeGapSmallElementSize + const height = SafeGapSmallElementSize const renderResult = await renderTestEditorWithCode( makeTestProjectCodeWithSnippet(`
@@ -2949,25 +2953,25 @@ describe('Absolute Resize Control', () => { expect(resizeControlTop.style.top).toEqual('') expect(resizeControlTop.style.left).toEqual('') expect(resizeControlTop.style.width).toEqual(`${width + RESIZE_CONTROL_SAFE_GAP * 2}px`) - expect(resizeControlTop.style.height).toEqual('10px') + expect(resizeControlTop.style.height).toEqual('5px') const resizeControlRight = renderResult.renderedDOM.getByTestId( `resize-control-${EdgePositionRight.x}-${EdgePositionRight.y}`, ) - expect(resizeControlRight.style.transform).toEqual('translate(-5px, 0px)') + expect(resizeControlRight.style.transform).toEqual('translate(0px, 0px)') expect(resizeControlRight.style.top).toEqual('') expect(resizeControlRight.style.left).toEqual(`${width + RESIZE_CONTROL_SAFE_GAP * 2}px`) - expect(resizeControlRight.style.width).toEqual('10px') + expect(resizeControlRight.style.width).toEqual('5px') expect(resizeControlRight.style.height).toEqual(`${height + RESIZE_CONTROL_SAFE_GAP * 2}px`) const resizeControlBottom = renderResult.renderedDOM.getByTestId( `resize-control-${EdgePositionBottom.x}-${EdgePositionBottom.y}`, ) - expect(resizeControlBottom.style.transform).toEqual('translate(0px, -5px)') + expect(resizeControlBottom.style.transform).toEqual('translate(0px, 0px)') expect(resizeControlBottom.style.top).toEqual(`${height + RESIZE_CONTROL_SAFE_GAP * 2}px`) expect(resizeControlBottom.style.left).toEqual('') expect(resizeControlBottom.style.width).toEqual(`${width + RESIZE_CONTROL_SAFE_GAP * 2}px`) - expect(resizeControlBottom.style.height).toEqual('10px') + expect(resizeControlBottom.style.height).toEqual('5px') const resizeControlLeft = renderResult.renderedDOM.getByTestId( `resize-control-${EdgePositionLeft.x}-${EdgePositionLeft.y}`, @@ -2975,7 +2979,7 @@ describe('Absolute Resize Control', () => { expect(resizeControlLeft.style.transform).toEqual('translate(-5px, 0px)') expect(resizeControlLeft.style.top).toEqual('') expect(resizeControlLeft.style.left).toEqual('') - expect(resizeControlLeft.style.width).toEqual('10px') + expect(resizeControlLeft.style.width).toEqual('5px') expect(resizeControlLeft.style.height).toEqual(`${height + RESIZE_CONTROL_SAFE_GAP * 2}px`) }) it("Doesn't show the safe gap during resize and mouse down", async () => {