Merge pull request #443 from Lemoncode/dev

New minor release, fixes, new components and new icons

.env.test

@@ -0,0 +1 @@
+NODE_ENV=test

e2e/helpers/konva-testing.helpers.ts

@@ -5,8 +5,7 @@ import { Group } from 'konva/lib/Group';
 
 const getLayer = async (page: Page): Promise<Layer> =>
   await page.evaluate(() => {
-    const layer = (window as any).KONVA_LAYER;
-    return layer;
+    return window.__TESTING_KONVA_LAYER__;
   });
 
 const getChildren = async (page: Page): Promise<(Group | Shape)[]> => {
@@ -48,3 +47,15 @@ export const getByShapeType = async (
     return undefined;
   }
 };
+
+export const getTransformer = async (page: Page): Promise<any> => {
+  const layer = await getLayer(page);
+  const transformer = layer?.children.find((child: any) => {
+    // Ensure that canvas has an element dropped, selected or not
+    return (
+      child._nodes?.length > 0 ||
+      (child._nodes?.length === 0 && child.index > 0)
+    );
+  });
+  return transformer;
+};

e2e/helpers/position.helpers.ts

@@ -27,3 +27,29 @@ export const dragAndDrop = async (
   await page.mouse.move(bPosition.x, bPosition.y);
   await page.mouse.up();
 };
+
+export const addComponentsToCanvas = async (
+  page: Page,
+  components: string[]
+) => {
+  const canvasPosition = await page.locator('canvas').boundingBox();
+  if (!canvasPosition) throw new Error('No canvas found');
+
+  for await (const [index, c] of components.entries()) {
+    const component = page.getByAltText(c, { exact: true });
+    const position = await getLocatorPosition(component);
+
+    const targetPosition = (
+      displacementQty: number,
+      multiplyFactor: number
+    ) => {
+      const positionDisplacement = displacementQty * (multiplyFactor + 1);
+      return {
+        x: canvasPosition.x + displacementQty + positionDisplacement,
+        y: canvasPosition.y + positionDisplacement,
+      };
+    };
+
+    await dragAndDrop(page, position, targetPosition(120, index));
+  }
+};

e2e/inline-edit/simple-inline-edit.spec.ts

@@ -0,0 +1,63 @@
+import { test, expect } from '@playwright/test';
+import { Group } from 'konva/lib/Group';
+import { dragAndDrop, getByShapeType, getLocatorPosition } from '../helpers';
+
+test('can add input component to canvas and edit', async ({ page }) => {
+  await page.goto('');
+  const component = page.getByAltText('Input', { exact: true });
+
+  const position = await getLocatorPosition(component);
+  const targetPosition = {
+    x: position.x + 500,
+    y: position.y - 240,
+  };
+  await dragAndDrop(page, position, targetPosition);
+  await page.mouse.dblclick(targetPosition.x, targetPosition.y);
+  const input = page.getByRole('textbox').first();
+  const inputValue = await input.getAttribute('value');
+  expect(inputValue).toEqual('Placeholder');
+
+  const textContent = 'User';
+  await input.fill(textContent);
+  await page.keyboard.press('Enter');
+  const inputShape = (await getByShapeType(page, 'input')) as Group;
+  expect(inputShape).toBeDefined();
+  const textShape = inputShape.children.find(
+    child => child.attrs.text === textContent
+  );
+  expect(textShape).toBeDefined();
+});
+
+test('can add and edit input, and delete last letter', async ({ page }) => {
+  await page.goto('');
+  const component = page.getByAltText('Input', { exact: true });
+
+  const position = await getLocatorPosition(component);
+  const targetPosition = {
+    x: position.x + 500,
+    y: position.y - 240,
+  };
+  await dragAndDrop(page, position, targetPosition);
+  await page.mouse.dblclick(targetPosition.x, targetPosition.y);
+
+  const input = page.getByRole('textbox').first();
+  const inputValue = await input.getAttribute('value');
+  expect(inputValue).toEqual('Placeholder');
+
+  const textContent = 'user';
+  await input.fill(textContent);
+
+  await page.keyboard.press('Backspace');
+
+  const updatedInputValue = await input.inputValue();
+  expect(updatedInputValue).toEqual('use');
+
+  await page.keyboard.press('Enter');
+
+  const inputShape = (await getByShapeType(page, 'input')) as Group;
+  expect(inputShape).toBeDefined();
+  const textShape = inputShape.children.find(
+    child => child.attrs.text === 'use'
+  );
+  expect(textShape).toBeDefined();
+});

e2e/selection/dropped-shape-is-selected.spec.ts

@@ -0,0 +1,98 @@
+import { test, expect } from '@playwright/test';
+import {
+  dragAndDrop,
+  getByShapeType,
+  getLocatorPosition,
+  getTransformer,
+  getAllByShapeType,
+} from '../helpers';
+import { Group } from 'konva/lib/Group';
+
+test('drop new shape in canvas, ensure new is selected, former is unselected - different shapes', 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 transformer = await getTransformer(page);
+  expect(transformer).toBeDefined();
+  expect(transformer.index).toEqual(1);
+  expect(transformer._nodes.length).toEqual(1);
+
+  const component2 = page.getByAltText('Label', { exact: true });
+  expect(component2).toBeDefined();
+
+  const offset = 200;
+
+  const position2 = await getLocatorPosition(component2);
+  await dragAndDrop(page, position2, {
+    x: position2.x + 500 + offset,
+    y: position2.y - 240 + offset,
+  });
+
+  const inputShape2 = (await getByShapeType(page, 'label')) as Group;
+  expect(inputShape2).toBeDefined();
+
+  const transformer2 = await getTransformer(page);
+  expect(transformer2).toBeDefined();
+  expect(transformer2.index).toEqual(2);
+  expect(transformer2._nodes.length).toEqual(1);
+});
+
+test('drop new shape in canvas, ensure new is selected, former is unselected - same shapes', 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 inputShapes: Group[] = (await getAllByShapeType(
+    page,
+    'input'
+  )) as Group[];
+  expect(inputShapes[0]).toBeDefined();
+
+  const transformer = await getTransformer(page);
+  expect(transformer).toBeDefined();
+  expect(transformer.index).toEqual(1);
+  expect(transformer._nodes.length).toEqual(1);
+
+  const component2 = page.getByAltText('Input', { exact: true });
+  expect(component2).toBeDefined();
+
+  const offset = 200;
+
+  const position2 = await getLocatorPosition(component2);
+  await dragAndDrop(page, position2, {
+    x: position2.x + 500 + offset,
+    y: position2.y - 240 + offset,
+  });
+
+  const inputShapes2: Group[] = (await getAllByShapeType(
+    page,
+    'input'
+  )) as Group[];
+  expect(inputShapes2[1]).toBeDefined();
+  expect(inputShapes2.length).toEqual(2);
+
+  const transformer2 = await getTransformer(page);
+  expect(transformer2).toBeDefined();
+  expect(transformer2.index).toEqual(2);
+  expect(transformer2._nodes.length).toEqual(1);
+});

e2e/selection/multiple-selection.spec.ts

@@ -0,0 +1,22 @@
+import { test, expect } from '@playwright/test';
+import { dragAndDrop, addComponentsToCanvas, getTransformer } from '../helpers';
+
+test('Should perform multiple selection when dragging and dropping over multiple components in the canvas', async ({
+  page,
+}) => {
+  await page.goto('');
+
+  //Drag and drop component to canvas
+  const componentsAtCanvas = ['Input', 'Input', 'Icon', 'Label'];
+  await addComponentsToCanvas(page, componentsAtCanvas);
+
+  //Click Away
+  await page.mouse.click(800, 130);
+
+  //Perform items selection by drag and drop
+  await dragAndDrop(page, { x: 260, y: 130 }, { x: 1000, y: 550 });
+
+  //Assert
+  const selectedItems = await getTransformer(page);
+  expect(selectedItems._nodes.length).toEqual(3);
+});

e2e/selection/shape-selection.spec.ts

@@ -0,0 +1,55 @@
+import { test, expect } from '@playwright/test';
+import {
+  dragAndDrop,
+  getByShapeType,
+  getLocatorPosition,
+  getTransformer,
+} from '../helpers';
+import { Group } from 'konva/lib/Group';
+
+test('no shapes on canvas, transformer not defined', async ({ page }) => {
+  await page.goto('');
+  const transformer = await getTransformer(page);
+  expect(transformer).not.toBeDefined();
+});
+
+test('drop shape in canvas, ensure is selected', 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 transformer = await getTransformer(page);
+  expect(transformer).toBeDefined();
+  expect(transformer.index).toEqual(1);
+  expect(transformer._nodes.length).toEqual(1);
+});
+
+test('drop shape in canvas, click on canvas, drop diselected', 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();
+
+  await page.click('canvas');
+
+  const transformer = await getTransformer(page);
+  expect(transformer).toBeDefined();
+  expect(transformer.index).toEqual(1);
+  expect(transformer._nodes.length).toEqual(0);
+});

global.d.ts

@@ -0,0 +1,7 @@
+import Konva from 'konva';
+
+declare global {
+  interface Window {
+    __TESTING_KONVA_LAYER__: Konva.Layer;
+  }
+}