Merge pull request #617 from Lemoncode/dev

new icons

e2e/helpers/position.helpers.ts

@@ -1,6 +1,5 @@
 import { Locator, Page } from '@playwright/test';
 import { Group } from 'konva/lib/Group';
-
 export interface Position {
   x: number;
   y: number;
@@ -20,13 +19,17 @@ export const getLocatorPosition = async (
 };
 
 export const getCanvasBoundingBox = async (page: Page) => {
-  const canvasWindowPos = await page
-    .locator('#konva-stage canvas')
-    .boundingBox();
+  const locator = page.locator('#konva-stage canvas').nth(1);
+
+  // Ensure that the canvas is visible before continuie
+  await locator.waitFor({ state: 'visible' });
+
+  const canvasWindowPos = await locator.boundingBox();
+
   if (canvasWindowPos) {
     return canvasWindowPos;
   } else {
-    throw new Error('Canvas is not loaded on ui');
+    throw new Error('Canvas is not loaded on UI');
   }
 };
 

src/pods/canvas/canvas.grid.tsx

@@ -0,0 +1,53 @@
+import React, { useMemo } from 'react';
+import { Layer, Line } from 'react-konva';
+import { Size } from '@/core/model';
+
+const gridSize = 40; // Default grid size (no scaling)
+
+const GridLine = React.memo(
+  ({ points }: { points: number[] }) => (
+    <Line points={points} stroke="rgba(0, 0, 0, 0.1)" strokeWidth={1} />
+  ),
+  (prevProps, nextProps) => prevProps.points.join() === nextProps.points.join()
+);
+
+interface Props {
+  // scale: number;
+  canvasSize: Size;
+}
+
+export const CanvasGridLayer: React.FC<Props> = ({ canvasSize }) => {
+  const gridSpacing = gridSize; // Use the original grid size, let Konva handle scaling
+  const width = canvasSize.width;
+  const height = canvasSize.height;
+
+  // Memoize the grid lines computation to avoid unnecessary recalculations
+  const { verticalLines, horizontalLines } = useMemo(() => {
+    const verticalLines = Array.from(
+      { length: Math.ceil(width / gridSpacing) },
+      (_, i) => [i * gridSpacing, 0, i * gridSpacing, height]
+    );
+
+    const horizontalLines = Array.from(
+      { length: Math.ceil(height / gridSpacing) },
+      (_, i) => [0, i * gridSpacing, width, i * gridSpacing]
+    );
+
+    return { verticalLines, horizontalLines };
+  }, [width, height, gridSpacing]);
+
+  return (
+    <Layer>
+      {/* Render vertical lines */}
+      {verticalLines.map((points, index) => (
+        <GridLine key={`v-line-${index}`} points={points} />
+      ))}
+      {/* Render horizontal lines */}
+      {horizontalLines.map((points, index) => (
+        <GridLine key={`h-line-${index}`} points={points} />
+      ))}
+    </Layer>
+  );
+};
+
+export default CanvasGridLayer;

src/pods/canvas/canvas.pod.tsx

@@ -1,4 +1,4 @@
-import { createRef, useEffect, useMemo, useRef, useState } from 'react';
+import React, { createRef, useEffect, useMemo, useRef, useState } from 'react';
 import Konva from 'konva';
 import { useCanvasContext } from '@/core/providers';
 import { Layer, Line, Rect, Stage, Transformer } from 'react-konva';
@@ -15,11 +15,14 @@ import { useDropImageFromDesktop } from './use-drop-image-from-desktop';
 import { useKeyboardDisplacement } from './use-keyboard-displacement';
 import { useMultipleSelectionShapeHook } from './use-multiple-selection-shape.hook';
 import { ContextMenu } from '../context-menu/use-context-menu.hook';
+import { CanvasGridLayer } from './canvas.grid';
 
 export const CanvasPod = () => {
   const [isTransfomerBeingDragged, setIsTransfomerBeingDragged] =
     useState(false);
 
+  const canvasSize = React.useMemo(() => ({ width: 3000, height: 3000 }), []);
+
   const {
     shapes,
     scale,
@@ -153,8 +156,8 @@ export const CanvasPod = () => {
       {/*TODO: move size to canvas provider?*/}
       {/*         onMouseDown={handleClearSelection}*/}
       <Stage
-        width={3000}
-        height={3000}
+        width={canvasSize.width}
+        height={canvasSize.height}
         onTouchStart={handleClearSelection}
         ref={stageRef}
         scale={{ x: scale, y: scale }}
@@ -163,6 +166,7 @@ export const CanvasPod = () => {
         onMouseUp={handleMouseUp}
         id="konva-stage" // data-id did not work for some reason
       >
+        <CanvasGridLayer canvasSize={canvasSize} />
         <Layer ref={layerRef}>
           {
             /* TODO compentize and simplify this */

src/pods/properties/components/icon-selector/modal/icons.ts

@@ -517,7 +517,8 @@ export const iconCollection: IconInfo[] = [
     searchTerms: [
       'tiktok',
       'stream',
-      'profile',
+      'social',
+      'media',
       'follow',
       'like',
       'comment',
@@ -2172,7 +2173,103 @@ export const iconCollection: IconInfo[] = [
   {
     name: 'AWS S3 storage',
     filename: 'awss3.svg',
-    searchTerms: ['aws', 's3', 'cloud', 'storage', 'amazon'],
+    searchTerms: ['aws', 's3', 'cloud', 'storage', 'amazon', 'bucket'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Robot',
+    filename: 'robot.svg',
+    searchTerms: ['robot', 'android', 'machine', 'artificial'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Reddit',
+    filename: 'reddit.svg',
+    searchTerms: ['reddit', 'social', 'media', 'community'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Rabbit',
+    filename: 'rabbit.svg',
+    searchTerms: ['rabbit', 'animal', 'bunny', 'pet'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Angry face',
+    filename: 'angry.svg',
+    searchTerms: ['angry', 'mad', 'emotion', 'face', 'emoji'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Nervous face',
+    filename: 'nervous.svg',
+    searchTerms: ['nervous', 'anxious', 'emotion', 'face', 'emoji'],
+    categories: ['IT'],
+  },
+  {
+    name: 'X eyes face',
+    filename: 'xeyes.svg',
+    searchTerms: ['eyes', 'emotion', 'face', 'emoji'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Snapchat',
+    filename: 'snapchat.svg',
+    searchTerms: ['snapchat', 'social', 'media', 'community'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Soccer ball',
+    filename: 'soccerball.svg',
+    searchTerms: ['soccer', 'ball', 'sport', 'football'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Toilet paper',
+    filename: 'toiletpaper.svg',
+    searchTerms: ['toilet', 'paper', 'bathroom', 'roll', 'clean'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Truck',
+    filename: 'truck.svg',
+    searchTerms: ['truck', 'vehicle', 'transport', 'delivery'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Truck trailer',
+    filename: 'trucktrailer.svg',
+    searchTerms: ['truck', 'trailer', 'vehicle', 'transport', 'delivery'],
+    categories: ['IT'],
+  },
+  {
+    name: 'User sound',
+    filename: 'usersound.svg',
+    searchTerms: ['user', 'sound', 'voice', 'profile'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Four users',
+    filename: 'usersfour.svg',
+    searchTerms: ['users', 'people', 'group', 'team'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Virtual reality',
+    filename: 'virtualreality.svg',
+    searchTerms: ['virtual', 'artificial', 'glasses', 'technology', 'vr'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Visor',
+    filename: 'visor.svg',
+    searchTerms: ['visor', 'protection', 'shield', 'head'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Wall',
+    filename: 'wall.svg',
+    searchTerms: ['wall', 'brick', 'construction', 'building'],
     categories: ['IT'],
   },
 ];