Merge pull request #466 from Lemoncode/dev

minor font fix dev to main

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();
+});

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<Position> => {
+  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);
+};

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;

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 {

src/pods/canvas/use-transform.hook.ts

@@ -33,6 +33,7 @@ export const useTransform = (
       transformerRef.current.enabledAnchors(
         selectedShape.attrs.typeOfTransformer
       );
+      transformerRef.current.rotateEnabled(false);
     }
   };