diff --git a/e2e/canvas/move-shape-using-keyboard.spec.ts b/e2e/canvas/move-shape-using-keyboard.spec.ts new file mode 100644 index 00000000..196917c6 --- /dev/null +++ b/e2e/canvas/move-shape-using-keyboard.spec.ts @@ -0,0 +1,111 @@ +import { test, expect } from '@playwright/test'; +import { + dragAndDrop, + getLocatorPosition, + getByShapeType, + getShapePosition, + moveSelected, +} from '../helpers'; +import { Group } from 'konva/lib/Group'; + +const numShifts: number = 10; + +test('move shape with the keyboard - left', async ({ page }) => { + await page.goto(''); + + const component = page.getByAltText('Input', { exact: true }); + const position = await getLocatorPosition(component); + + await dragAndDrop(page, position, { + x: position.x + 500, + y: position.y - 240, + }); + + const inputShape = (await getByShapeType(page, 'input')) as Group; + expect(inputShape).toBeDefined(); + + const draggedPosition = await getShapePosition(inputShape); + + moveSelected(page, 'ArrowLeft', numShifts); + + const inputShapeMoved = (await getByShapeType(page, 'input')) as Group; + const movedPosition = await getShapePosition(inputShapeMoved); + + expect(movedPosition.x === draggedPosition.x - numShifts * 2).toBeTruthy(); + expect(movedPosition.y === draggedPosition.y).toBeTruthy(); +}); + +test('move shape with the keyboard - up', async ({ page }) => { + await page.goto(''); + + const component = page.getByAltText('Input', { exact: true }); + const position = await getLocatorPosition(component); + + await dragAndDrop(page, position, { + x: position.x + 500, + y: position.y - 240, + }); + + const inputShape = (await getByShapeType(page, 'input')) as Group; + expect(inputShape).toBeDefined(); + + const draggedPosition = await getShapePosition(inputShape); + + moveSelected(page, 'ArrowUp', numShifts); + + const inputShapeMoved = (await getByShapeType(page, 'input')) as Group; + const movedPosition = await getShapePosition(inputShapeMoved); + + expect(movedPosition.x === draggedPosition.x).toBeTruthy(); + expect(movedPosition.y === draggedPosition.y - numShifts * 2).toBeTruthy(); +}); + +test('move shape with the keyboard - down', async ({ page }) => { + await page.goto(''); + + const component = page.getByAltText('Input', { exact: true }); + const position = await getLocatorPosition(component); + + await dragAndDrop(page, position, { + x: position.x + 500, + y: position.y - 240, + }); + + const inputShape = (await getByShapeType(page, 'input')) as Group; + expect(inputShape).toBeDefined(); + + const draggedPosition = await getShapePosition(inputShape); + + moveSelected(page, 'ArrowDown', numShifts); + + const inputShapeMoved = (await getByShapeType(page, 'input')) as Group; + const movedPosition = await getShapePosition(inputShapeMoved); + + expect(movedPosition.x === draggedPosition.x).toBeTruthy(); + expect(movedPosition.y === draggedPosition.y + numShifts * 2).toBeTruthy(); +}); + +test('move shape with the keyboard - right', async ({ page }) => { + await page.goto(''); + + const component = page.getByAltText('Input', { exact: true }); + const position = await getLocatorPosition(component); + + await dragAndDrop(page, position, { + x: position.x + 500, + y: position.y - 240, + }); + + const inputShape = (await getByShapeType(page, 'input')) as Group; + expect(inputShape).toBeDefined(); + + const draggedPosition = await getShapePosition(inputShape); + + moveSelected(page, 'ArrowRight', numShifts); + + const inputShapeMoved = (await getByShapeType(page, 'input')) as Group; + const movedPosition = await getShapePosition(inputShapeMoved); + + expect(movedPosition.x === draggedPosition.x + numShifts * 2).toBeTruthy(); + expect(movedPosition.y === draggedPosition.y).toBeTruthy(); +}); diff --git a/e2e/helpers/position.helpers.ts b/e2e/helpers/position.helpers.ts index 8eb13605..c0e85df5 100644 --- a/e2e/helpers/position.helpers.ts +++ b/e2e/helpers/position.helpers.ts @@ -1,4 +1,5 @@ import { Locator, Page } from '@playwright/test'; +import { Group } from 'konva/lib/Group'; interface Position { x: number; @@ -54,3 +55,15 @@ export const addComponentsToCanvas = async ( await dragAndDrop(page, position, targetPosition(120, index)); } }; + +export const getShapePosition = async (shape: Group): Promise => { + return { x: shape?.attrs.x, y: shape?.attrs.y }; +}; + +export const moveSelected = ( + page: Page, + direction: string, + numShifts: number +) => { + for (let i: number = 0; i < numShifts; i++) page.keyboard.down(direction); +}; diff --git a/public/widgets/datepicker.svg b/public/widgets/datepicker.svg index ce18562e..d0bf6e63 100644 --- a/public/widgets/datepicker.svg +++ b/public/widgets/datepicker.svg @@ -1,9 +1,68 @@ - - - + - - - - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/common/components/mock-components/front-components/shape.const.ts b/src/common/components/mock-components/front-components/shape.const.ts index b3d155ba..f35a775e 100644 --- a/src/common/components/mock-components/front-components/shape.const.ts +++ b/src/common/components/mock-components/front-components/shape.const.ts @@ -3,7 +3,7 @@ const DEFAULT_STROKE_COLOR = '#000000'; const DEFAULT_STROKE_WIDTH = 1; const DEFAULT_STROKE_STYLE: number[] = []; const DEFAULT_FILL_BACKGROUND = '#ffffff'; -const DEFAULT_FONT_FAMILY = 'Comic Sans MS, Balsamiq Sans, cursive'; +const DEFAULT_FONT_FAMILY = 'Balsamiq Sans, Comic Sans MS, cursive'; const DEFAULT_FONT_SIZE = 16; const DEFAULT_FILL_TEXT = '#000000'; const DEFAULT_PADDING = 10; diff --git a/src/pods/canvas/model/shape-other-props.utils.ts b/src/pods/canvas/model/shape-other-props.utils.ts index 4af75dd4..8935e3cb 100644 --- a/src/pods/canvas/model/shape-other-props.utils.ts +++ b/src/pods/canvas/model/shape-other-props.utils.ts @@ -25,6 +25,13 @@ export const generateDefaultOtherProps = ( }; case 'button': case 'textarea': + return { + stroke: BASIC_SHAPE.DEFAULT_STROKE_COLOR, + backgroundColor: BASIC_SHAPE.DEFAULT_FILL_BACKGROUND, + textColor: BASIC_SHAPE.DEFAULT_FILL_TEXT, + strokeStyle: [], + borderRadius: `${BASIC_SHAPE.DEFAULT_CORNER_RADIUS}`, + }; case 'vertical-menu': case 'horizontal-menu': return { diff --git a/src/pods/canvas/use-transform.hook.ts b/src/pods/canvas/use-transform.hook.ts index ac812661..5ee9da9c 100644 --- a/src/pods/canvas/use-transform.hook.ts +++ b/src/pods/canvas/use-transform.hook.ts @@ -33,6 +33,7 @@ export const useTransform = ( transformerRef.current.enabledAnchors( selectedShape.attrs.typeOfTransformer ); + transformerRef.current.rotateEnabled(false); } };