From 257e913ae6530b2375465e202aacabd0218c1fc4 Mon Sep 17 00:00:00 2001
From: KirillSerg <kirill.sergienko1989@gmail.com>
Date: Wed, 4 Sep 2024 13:04:33 +0300
Subject: [PATCH 1/5] feat: added some styles

---
 src/App.tsx                             |  4 ++--
 src/components/HistoryControls.tsx      | 25 +++++++++++++++++--------
 src/components/Inspector.tsx            |  2 +-
 src/components/Toolbar.tsx              | 22 +++++++++++-----------
 src/components/Zoom.tsx                 |  9 ++++-----
 src/components/elements/FreeIconBtn.tsx | 15 ++++++++++-----
 src/index.css                           |  2 +-
 7 files changed, 46 insertions(+), 33 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index aec7f9b..f228328 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -29,9 +29,9 @@ const App = () => {
       <Toolbar />
       <Canvas />
       <Inspector />
-      <div className="w-full flex justify-end px-5">
-        <Zoom />
+      <div className="w-full flex justify-between absolute bottom-4 right-5 min-w-[10%] max-w-[20%] h-fit">
         <HistoryControls />
+        <Zoom />
       </div>
     </div>
   );
diff --git a/src/components/HistoryControls.tsx b/src/components/HistoryControls.tsx
index 6210d0a..0a99f1f 100644
--- a/src/components/HistoryControls.tsx
+++ b/src/components/HistoryControls.tsx
@@ -1,21 +1,30 @@
 import { useAtom } from 'jotai';
-import { useHistoryAtom } from '../store/store';
+import {
+  currentHistoryIndexAtom,
+  historyAtom,
+  useHistoryAtom,
+} from '../store/store';
 
 const HistoryControls = () => {
   const [, doRedo] = useAtom(useHistoryAtom);
+  const [currentHistoryIndex] = useAtom(currentHistoryIndexAtom);
+  const [history] = useAtom(historyAtom);
 
   return (
-    // <div className="w-full flex justify-end px-5">
-    <div className="h-fit w-fit px-2 fixed bottom-3 right-[20%] flex justify-center items-center gap-4 border-[1px] border-black">
+    // h-fit w-fit px-2 fixed bottom-3 right-[20%] flex justify-center items-center gap-4 border-[1px] border-black
+    <div className="flex justify-between items-center gap-3 bg-gray-200 rounded-lg p-1">
       <button
         // id=""
-        className="h-7 w-7"
+        className="h-6 w-6"
         onClick={() => doRedo(1)}
+        disabled={history.length - 1 == currentHistoryIndex}
       >
         <svg
           viewBox="0 0 20 20"
           fill="none"
-          stroke="currentColor"
+          stroke={
+            history.length - 1 == currentHistoryIndex ? 'grey' : 'currentColor'
+          }
           strokeLinecap="round"
           strokeLinejoin="round"
           width={'100%'}
@@ -30,13 +39,14 @@ const HistoryControls = () => {
 
       <button
         // id=""
-        className="h-7 w-7"
+        className="h-6 w-6"
         onClick={() => doRedo(-1)}
+        disabled={currentHistoryIndex == 0}
       >
         <svg
           viewBox="0 0 20 20"
           fill="none"
-          stroke="currentColor"
+          stroke={currentHistoryIndex == 0 ? 'grey' : 'currentColor'}
           strokeLinecap="round"
           strokeLinejoin="round"
           width={'100%'}
@@ -49,7 +59,6 @@ const HistoryControls = () => {
         </svg>
       </button>
     </div>
-    // </div>
   );
 };
 
diff --git a/src/components/Inspector.tsx b/src/components/Inspector.tsx
index 6c4dc8d..aefd49f 100644
--- a/src/components/Inspector.tsx
+++ b/src/components/Inspector.tsx
@@ -112,7 +112,7 @@ const Inspector = () => {
   return (
     <>
       {(elements[0].id || isDrawing) && (
-        <aside className="fixed min-w-[10%] max-w-[20%] max-h-[80%] overflow-auto px-3 py-5 top-[10%] right-5 border border-black">
+        <aside className="fixed min-w-[10%] max-w-[20%] max-h-[70%] overflow-auto px-3 py-5 top-[10%] right-5 shadow-[5px_5px_30px_#d9d9d9] bg-white rounded-lg">
           <>
             <p>Actions</p>
             <div id="actions" className="flex flex-wrap gap-1">
diff --git a/src/components/Toolbar.tsx b/src/components/Toolbar.tsx
index 48b1ad3..883cd5f 100644
--- a/src/components/Toolbar.tsx
+++ b/src/components/Toolbar.tsx
@@ -38,53 +38,53 @@ const Toolbar = () => {
   };
 
   return (
-    <header className="w-fit h-[6%] fixed top-3 flex justify-center items-center gap-4 border-[1px] border-black">
+    <header className="w-fit h-fit p-1 fixed top-3 flex bg-white justify-center flex-wrap items-center gap-x-4 rounded-lg shadow-[5px_5px_30px_#d9d9d9]">
       <GrabIconBtn
-        className={`${creationInitialElement.type_name === 'grab' ? 'bg-orange-500' : 'bg-inherit'} h-[100%] w-8 p-[6px] focus-visible:outline-none`}
+        className={`${creationInitialElement.type_name === 'grab' ? 'bg-blue-300' : 'bg-inherit'} h-8 w-8 p-[6px] focus-visible:outline-none rounded-lg`}
         handlerClick={handlerSelectElement}
       />
       <FreeIconBtn
-        className={`${creationInitialElement.type_name === 'free' ? 'bg-orange-500' : 'bg-inherit'} h-[100%] w-8 p-[6px] focus-visible:outline-none`}
+        className={`${creationInitialElement.type_name === 'free' ? 'bg-blue-300' : 'bg-inherit'} h-8 w-8 p-[6px] focus-visible:outline-none rounded-lg`}
         handlerClick={handlerSelectElement}
       />
 
       <RectIconBtn
-        className={`${creationInitialElement.type_name === 'rect' ? 'bg-orange-500' : 'bg-inherit'} h-[100%] w-8 p-[6px] focus-visible:outline-none`}
+        className={`${creationInitialElement.type_name === 'rect' ? 'bg-blue-300' : 'bg-inherit'} h-8 w-8 p-[6px] focus-visible:outline-none rounded-lg`}
         handlerClick={handlerSelectElement}
       />
 
       <EllipseIconBtn
-        className={`${creationInitialElement.type_name === 'ellipse' ? 'bg-orange-500' : 'bg-inherit'} h-[100%] w-8 p-[6px] focus-visible:outline-none`}
+        className={`${creationInitialElement.type_name === 'ellipse' ? 'bg-blue-300' : 'bg-inherit'} h-[100%] w-8 p-[6px] focus-visible:outline-none rounded-lg`}
         handlerClick={handlerSelectElement}
       />
 
       <TriangleIconBtn
-        className={`${creationInitialElement.type_name === 'polygon' ? 'bg-orange-500' : 'bg-inherit'} h-[100%] w-8 p-[6px] focus-visible:outline-none`}
+        className={`${creationInitialElement.type_name === 'polygon' ? 'bg-blue-300' : 'bg-inherit'} h-[100%] w-8 p-[6px] focus-visible:outline-none rounded-lg`}
         handlerClick={handlerSelectElement}
       />
 
       <LineIconBtn
-        className={`${creationInitialElement.type_name === 'line' ? 'bg-orange-500' : 'bg-inherit'} h-[100%] w-8 p-[6px] focus-visible:outline-none`}
+        className={`${creationInitialElement.type_name === 'line' ? 'bg-blue-300' : 'bg-inherit'} h-[100%] w-8 p-[6px] focus-visible:outline-none rounded-lg`}
         handlerClick={handlerSelectElement}
       />
 
       <LineArrowIconBtn
-        className={`${creationInitialElement.type_name === 'arrow_line' ? 'bg-orange-500' : 'bg-inherit'} h-[100%] w-8 p-[6px] focus-visible:outline-none`}
+        className={`${creationInitialElement.type_name === 'arrow_line' ? 'bg-blue-300' : 'bg-inherit'} h-[100%] w-8 p-[6px] focus-visible:outline-none rounded-lg`}
         handlerClick={handlerSelectElement}
       />
 
       <TextIconBtn
-        className={`${creationInitialElement.type_name === 'text' ? 'bg-orange-500' : 'bg-inherit'} h-[100%] w-8 p-[6px] focus-visible:outline-none`}
+        className={`${creationInitialElement.type_name === 'text' ? 'bg-blue-300' : 'bg-inherit'} h-[100%] w-8 p-[6px] focus-visible:outline-none rounded-lg`}
         handlerClick={handlerSelectElement}
       />
 
       <PencilIconBtn
-        className={`${creationInitialElement.type_name === 'pencil' ? 'bg-orange-500' : 'bg-inherit'} h-[100%] w-8 p-[6px] focus-visible:outline-none`}
+        className={`${creationInitialElement.type_name === 'pencil' ? 'bg-blue-300' : 'bg-inherit'} h-[100%] w-8 p-[6px] focus-visible:outline-none rounded-lg`}
         handlerClick={handlerSelectElement}
       />
 
       <ImageIconBtn
-        className={`${creationInitialElement.type_name === 'image' ? 'bg-orange-500' : 'bg-inherit'} h-[100%] w-8 p-[6px] focus-visible:outline-none relative`}
+        className={`${creationInitialElement.type_name === 'image' ? 'bg-blue-300' : 'bg-inherit'} h-[100%] w-8 p-[6px] focus-visible:outline-none relative rounded-lg`}
         handlerClick={handlerSelectElement}
       />
     </header>
diff --git a/src/components/Zoom.tsx b/src/components/Zoom.tsx
index a635bd6..8cbd1cd 100644
--- a/src/components/Zoom.tsx
+++ b/src/components/Zoom.tsx
@@ -7,16 +7,16 @@ const Zoom = () => {
   const [, zoomCanvas] = useAtom(zoomCanvasAtom);
 
   return (
-    // <div className="w-full flex justify-end px-5">
-    <div className="h-fit w-fit px-2 fixed bottom-3 flex justify-center items-center gap-4 border-[1px] border-black">
+    // h-fit w-fit px-2 fixed bottom-3 flex justify-center items-center gap-4 border-[1px] border-black
+    <div className="w-[50%] flex justify-between items-center bg-gray-200 rounded-lg p-1">
       <button
         id="zoomdown"
-        className="font-bold text-xl leading-none text-start"
+        className="font-bold text-xl"
         onClick={() => {
           zoomCanvas(ZoomCanvasFn.ZOOMDOWN);
         }}
       >
-        -
+        &minus;
       </button>
 
       <button
@@ -39,7 +39,6 @@ const Zoom = () => {
         +
       </button>
     </div>
-    // </div>
   );
 };
 
diff --git a/src/components/elements/FreeIconBtn.tsx b/src/components/elements/FreeIconBtn.tsx
index bcbc61e..a93023c 100644
--- a/src/components/elements/FreeIconBtn.tsx
+++ b/src/components/elements/FreeIconBtn.tsx
@@ -9,13 +9,18 @@ const FreeIconBtn = ({ className, handlerClick }: Props) => {
   return (
     <button className={`${className}`} onClick={() => handlerClick('free')}>
       <svg
-        fill="#000000"
-        height="70%"
-        width="20.73"
         xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 96.09 122.88"
+        viewBox="1064.7701 445.5539 419.8101 717.0565"
+        height="100%"
+        width="100%"
       >
-        <path d="M61.61,122.31c-1.34,0.62-2.82,0.72-4.15,0.37c-1.46-0.39-2.75-1.31-3.55-2.67L39.03,94.36l-14.15,15.88 c-1.97,2.21-4.21,3.88-6.37,4.75c-1.66,0.67-3.31,0.88-4.84,0.56c-1.69-0.36-3.14-1.33-4.2-3.01c-0.84-1.33-1.4-3.11-1.57-5.39 L0.01,4.41C0,4.33,0,4.25,0,4.18c-0.01-0.64,0.11-1.27,0.37-1.84c0.29-0.66,0.76-1.26,1.37-1.7C2,0.44,2.28,0.31,2.58,0.23 c0.59-0.2,1.2-0.27,1.79-0.2C4.94,0.09,5.5,0.26,6.01,0.55C6.18,0.63,6.35,0.73,6.5,0.85l84.88,58.11 c1.88,1.29,3.14,2.66,3.88,4.05c0.93,1.75,1.04,3.49,0.5,5.14c-0.48,1.49-1.5,2.81-2.9,3.91c-1.82,1.43-4.39,2.54-7.3,3.14 c-0.03,0.01-0.07,0.01-0.1,0.02l-20.73,4.29l14.77,25.73c0.78,1.36,0.93,2.94,0.54,4.39c-0.38,1.41-1.27,2.71-2.59,3.56 c-0.05,0.04-0.11,0.07-0.17,0.1l-15.34,8.86C61.84,122.21,61.73,122.26,61.61,122.31L61.61,122.31z M58.84,117.48 c0.15,0.04,0.3,0.04,0.44-0.01c0.05-0.03,0.1-0.06,0.16-0.08l15.14-8.74c0.14-0.1,0.23-0.25,0.28-0.41 c0.03-0.13,0.03-0.25-0.01-0.33L58.23,78.97l0.01,0c-0.14-0.24-0.24-0.51-0.3-0.8c-0.3-1.45,0.64-2.87,2.09-3.17l24.36-5.04 c0.03-0.01,0.06-0.02,0.1-0.02c2.1-0.44,3.88-1.18,5.07-2.11c0.58-0.46,0.97-0.91,1.11-1.35c0.09-0.27,0.05-0.6-0.15-0.97 c-0.34-0.64-1.03-1.34-2.15-2.11L5.58,6.74l7.69,100.02c0.1,1.36,0.37,2.32,0.75,2.92c0.22,0.35,0.49,0.55,0.77,0.61 c0.45,0.1,1.04-0.01,1.72-0.28c1.39-0.56,2.92-1.73,4.35-3.34l16.62-18.65l0,0c0.19-0.21,0.41-0.39,0.66-0.54 c1.28-0.74,2.93-0.31,3.67,0.98l16.75,28.85C58.62,117.39,58.71,117.45,58.84,117.48L58.84,117.48z M59.43,117.39 c0.35-0.17,0.75-0.27,1.17-0.27L59.43,117.39L59.43,117.39z" />
+        <polygon
+          stroke="black"
+          strokeWidth="40"
+          fill="none"
+          points="1283.1857,1127.3097 1406.1421,1077.6322 1314.2406,850.1678 1463.913,852.7823 1093.4828,480.8547 
+	1085.4374,1005.6964 1191.2842,899.8454 "
+        />
       </svg>
     </button>
   );
diff --git a/src/index.css b/src/index.css
index deab91e..b610e4f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -8,7 +8,7 @@
   border-radius: 100px;
 }
 ::-webkit-scrollbar-track {
-  background: rgb(230, 229, 229);
+  background: none;
 }
 ::-webkit-scrollbar-thumb {
   width: 8px;

From d3ba497bdc6139ce9093ff6d130c1ce3de2235dc Mon Sep 17 00:00:00 2001
From: KirillSerg <kirill.sergienko1989@gmail.com>
Date: Wed, 4 Sep 2024 13:14:55 +0300
Subject: [PATCH 2/5] fix: tests

---
 UItests/test.spec.ts                        | 2 +-
 src/components/elements/TriangleIconBtn.tsx | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/UItests/test.spec.ts b/UItests/test.spec.ts
index 9aee14c..984db06 100644
--- a/UItests/test.spec.ts
+++ b/UItests/test.spec.ts
@@ -41,7 +41,7 @@ test("Create rect", async ({ page }) => {
 
 test("Create triangle(polygon)", async ({ page }) => {
   await page.goto('http://localhost:5173/');
-  const toolbarTriangle = page.locator('header > button > svg > polygon')
+  const toolbarTriangle = page.locator('header > [id=triangle]')
   await toolbarTriangle.click()
   await page.mouse.move(300, 300);
   await page.mouse.down();
diff --git a/src/components/elements/TriangleIconBtn.tsx b/src/components/elements/TriangleIconBtn.tsx
index 1af5779..2fa989d 100644
--- a/src/components/elements/TriangleIconBtn.tsx
+++ b/src/components/elements/TriangleIconBtn.tsx
@@ -7,7 +7,11 @@ interface Props {
 
 const TriangleIconBtn = ({ className, handlerClick }: Props) => {
   return (
-    <button className={`${className}`} onClick={() => handlerClick('polygon')}>
+    <button
+      id="triangle"
+      className={`${className}`}
+      onClick={() => handlerClick('polygon')}
+    >
       <svg
         viewBox="0 0 24 24"
         height="100%"

From 31a25ac294427f51e5c917db0dcac18fbd5ca485 Mon Sep 17 00:00:00 2001
From: KirillSerg <kirill.sergienko1989@gmail.com>
Date: Wed, 4 Sep 2024 15:55:48 +0300
Subject: [PATCH 3/5] fix: some fixec

---
 src/assets/utilities.ts                       |   6 +
 src/components/HistoryControls.tsx            |   1 -
 src/components/SelectingFrame.tsx             | 231 ++++++++++--------
 src/components/Toolbar.tsx                    |   1 -
 src/components/Zoom.tsx                       |   1 -
 .../inspectorElements/ColorsPalette.tsx       |   9 +-
 src/store/store.ts                            |  46 ++--
 7 files changed, 162 insertions(+), 133 deletions(-)

diff --git a/src/assets/utilities.ts b/src/assets/utilities.ts
index 51acc5a..1c8cefe 100644
--- a/src/assets/utilities.ts
+++ b/src/assets/utilities.ts
@@ -81,6 +81,8 @@ export const useResizedCoordinates = (
   // line
   let updatedX1 = selectedEl.x1
   let updatedX2 = selectedEl.x2
+  let updatedY1 = selectedEl.y1
+  let updatedY2 = selectedEl.y2
   // poligon(triangle)
   let updatedTrianglePointsArr = getTrianglePointsArrFromString(selectedEl.points)
   // pencil
@@ -157,6 +159,7 @@ export const useResizedCoordinates = (
     updatedCX = selectedEl.cx + (update.x - selectingArea.startX) / 2
     updatedRX = Math.abs(selectedEl.rx + (update.x - selectingArea.startX) / 2)
     updatedX2 = selectedEl.x2 + (update.x - selectingArea.startX)
+    updatedY2 = selectedEl.y2 + (update.y - selectingArea.startY)
 
     if (+updatedTrianglePointsArr[0][0] < +updatedTrianglePointsArr[2][0]) {
       // left-bottom, top, right-bottom
@@ -187,6 +190,7 @@ export const useResizedCoordinates = (
     updatedCX = selectedEl.cx + (update.x - selectingArea.startX) / 2
     updatedRX = Math.abs(selectedEl.rx - (update.x - selectingArea.startX) / 2)
     updatedX1 = selectedEl.x1 + (update.x - selectingArea.startX)
+    updatedY1 = selectedEl.y1 + (update.y - selectingArea.startY)
 
     if (+updatedTrianglePointsArr[0][0] > +updatedTrianglePointsArr[2][0]) {
       // left-bottom, top, right-bottom
@@ -251,6 +255,8 @@ export const useResizedCoordinates = (
     ry: selectedEl.type === "ellipse" ? updatedRY : selectedEl.ry !== 0 ? getBorderRadius(updatedWidth, updatedHeight) : 0,
     x1: updatedX1,
     x2: updatedX2,
+    y1: updatedY1,
+    y2: updatedY2,
     points: updatedTrianglePointsArr.map(points => points.join()).join(" "),
     d: "M " + pencilPointsArr.map(points => points.join(" ")).join(" L "),
     fontSize: (updatedHeight / 1.5).toString(),
diff --git a/src/components/HistoryControls.tsx b/src/components/HistoryControls.tsx
index 0a99f1f..341f365 100644
--- a/src/components/HistoryControls.tsx
+++ b/src/components/HistoryControls.tsx
@@ -11,7 +11,6 @@ const HistoryControls = () => {
   const [history] = useAtom(historyAtom);
 
   return (
-    // h-fit w-fit px-2 fixed bottom-3 right-[20%] flex justify-center items-center gap-4 border-[1px] border-black
     <div className="flex justify-between items-center gap-3 bg-gray-200 rounded-lg p-1">
       <button
         // id=""
diff --git a/src/components/SelectingFrame.tsx b/src/components/SelectingFrame.tsx
index 1f09644..7407339 100644
--- a/src/components/SelectingFrame.tsx
+++ b/src/components/SelectingFrame.tsx
@@ -11,109 +11,140 @@ const SelectingFrame = ({ element }: Props) => {
   const [, onMouseUp] = useAtom(onMouseUpAtom);
 
   return (
-    <g id="frame">
-      {/* top side */}
-      <line
-        className="hover:cursor-n-resize"
-        onMouseDown={() => setResizeVector('nord')}
-        onMouseUp={onMouseUp}
-        x1={element.x - element.strokeWidth / 2 - 2}
-        y1={element.y - element.strokeWidth / 2 - 2}
-        x2={element.x + element.width + element.strokeWidth / 2 + 2}
-        y2={element.y - element.strokeWidth / 2 - 2}
-        stroke="red"
-        strokeWidth={2}
-      />
-      {/* right side */}
-      <line
-        className="hover:cursor-e-resize"
-        onMouseDown={() => setResizeVector('east')}
-        onMouseUp={onMouseUp}
-        x1={element.x + element.width + element.strokeWidth / 2 + 2}
-        y1={element.y - element.strokeWidth / 2 - 2}
-        x2={element.x + element.width + element.strokeWidth / 2 + 2}
-        y2={element.y + element.height + element.strokeWidth / 2 + 2}
-        stroke="red"
-        strokeWidth={2}
-      />
-      {/* bottom side */}
-      <line
-        className="hover:cursor-s-resize"
-        onMouseDown={() => setResizeVector('south')}
-        onMouseUp={onMouseUp}
-        x1={element.x - element.strokeWidth / 2 - 2}
-        y1={element.y + element.height + element.strokeWidth / 2 + 2}
-        x2={element.x + element.width + element.strokeWidth / 2 + 2}
-        y2={element.y + element.height + element.strokeWidth / 2 + 2}
-        stroke="red"
-        strokeWidth={2}
-      />
-      {/* left side */}
-      <line
-        className="hover:cursor-w-resize"
-        onMouseDown={() => setResizeVector('west')}
-        onMouseUp={onMouseUp}
-        x1={element.x - element.strokeWidth / 2 - 2}
-        y1={element.y - element.strokeWidth / 2 - 2}
-        x2={element.x - element.strokeWidth / 2 - 2}
-        y2={element.y + element.height + element.strokeWidth / 2 + 2}
-        stroke="red"
-        strokeWidth={2}
-      />
-      <g>
-        {/* top-left */}
-        <rect
-          className="hover:cursor-nwse-resize"
-          onMouseDown={() => setResizeVector('nordwest')}
-          onMouseUp={onMouseUp}
-          x={element.x - element.strokeWidth / 2 - 7}
-          y={element.y - element.strokeWidth / 2 - 7}
-          width="10"
-          height="10"
-          stroke="blue"
-          fill="white"
-        />
+    <>
+      {element.type !== 'line' ? (
+        <g id="frame">
+          {/* top side */}
+          <line
+            className="hover:cursor-n-resize"
+            onMouseDown={() => setResizeVector('nord')}
+            onMouseUp={onMouseUp}
+            x1={element.x - element.strokeWidth / 2 - 2}
+            y1={element.y - element.strokeWidth / 2 - 2}
+            x2={element.x + element.width + element.strokeWidth / 2 + 2}
+            y2={element.y - element.strokeWidth / 2 - 2}
+            stroke="red"
+            strokeWidth={2}
+          />
+          {/* right side */}
+          <line
+            className="hover:cursor-e-resize"
+            onMouseDown={() => setResizeVector('east')}
+            onMouseUp={onMouseUp}
+            x1={element.x + element.width + element.strokeWidth / 2 + 2}
+            y1={element.y - element.strokeWidth / 2 - 2}
+            x2={element.x + element.width + element.strokeWidth / 2 + 2}
+            y2={element.y + element.height + element.strokeWidth / 2 + 2}
+            stroke="red"
+            strokeWidth={2}
+          />
+          {/* bottom side */}
+          <line
+            className="hover:cursor-s-resize"
+            onMouseDown={() => setResizeVector('south')}
+            onMouseUp={onMouseUp}
+            x1={element.x - element.strokeWidth / 2 - 2}
+            y1={element.y + element.height + element.strokeWidth / 2 + 2}
+            x2={element.x + element.width + element.strokeWidth / 2 + 2}
+            y2={element.y + element.height + element.strokeWidth / 2 + 2}
+            stroke="red"
+            strokeWidth={2}
+          />
+          {/* left side */}
+          <line
+            className="hover:cursor-w-resize"
+            onMouseDown={() => setResizeVector('west')}
+            onMouseUp={onMouseUp}
+            x1={element.x - element.strokeWidth / 2 - 2}
+            y1={element.y - element.strokeWidth / 2 - 2}
+            x2={element.x - element.strokeWidth / 2 - 2}
+            y2={element.y + element.height + element.strokeWidth / 2 + 2}
+            stroke="red"
+            strokeWidth={2}
+          />
+          <g>
+            {/* top-left */}
+            <rect
+              className="hover:cursor-nwse-resize"
+              onMouseDown={() => setResizeVector('nordwest')}
+              onMouseUp={onMouseUp}
+              x={element.x - element.strokeWidth / 2 - 7}
+              y={element.y - element.strokeWidth / 2 - 7}
+              width="10"
+              height="10"
+              stroke="blue"
+              fill="white"
+            />
 
-        {/* top-right */}
-        <rect
-          className="hover:cursor-nesw-resize"
-          onMouseDown={() => setResizeVector('nordeast')}
-          onMouseUp={onMouseUp}
-          x={element.x + element.width - element.strokeWidth / 2 + 7}
-          y={element.y - element.strokeWidth / 2 - 7}
-          width="10"
-          height="10"
-          stroke="blue"
-          fill="white"
-        />
+            {/* top-right */}
+            <rect
+              className="hover:cursor-nesw-resize"
+              onMouseDown={() => setResizeVector('nordeast')}
+              onMouseUp={onMouseUp}
+              x={element.x + element.width - element.strokeWidth / 2 + 7}
+              y={element.y - element.strokeWidth / 2 - 7}
+              width="10"
+              height="10"
+              stroke="blue"
+              fill="white"
+            />
 
-        {/* bottom-right */}
-        <rect
-          className="hover:cursor-nwse-resize"
-          onMouseDown={() => setResizeVector('southeast')}
-          onMouseUp={onMouseUp}
-          x={element.x + element.width - element.strokeWidth / 2 + 7}
-          y={element.y + element.height - element.strokeWidth / 2 + 7}
-          width="10"
-          height="10"
-          stroke="blue"
-          fill="white"
-        />
+            {/* bottom-right */}
+            <rect
+              className="hover:cursor-nwse-resize"
+              onMouseDown={() => setResizeVector('southeast')}
+              onMouseUp={onMouseUp}
+              x={element.x + element.width - element.strokeWidth / 2 + 7}
+              y={element.y + element.height - element.strokeWidth / 2 + 7}
+              width="10"
+              height="10"
+              stroke="blue"
+              fill="white"
+            />
 
-        {/* bottom-left */}
-        <rect
-          className="hover:cursor-nesw-resize"
-          onMouseDown={() => setResizeVector('southwest')}
-          onMouseUp={onMouseUp}
-          x={element.x - element.strokeWidth / 2 - 7}
-          y={element.y + element.height - element.strokeWidth / 2 + 7}
-          width="10"
-          height="10"
-          stroke="blue"
-          fill="white"
-        />
-      </g>
-    </g>
+            {/* bottom-left */}
+            <rect
+              className="hover:cursor-nesw-resize"
+              onMouseDown={() => setResizeVector('southwest')}
+              onMouseUp={onMouseUp}
+              x={element.x - element.strokeWidth / 2 - 7}
+              y={element.y + element.height - element.strokeWidth / 2 + 7}
+              width="10"
+              height="10"
+              stroke="blue"
+              fill="white"
+            />
+          </g>
+        </g>
+      ) : (
+        <g id="frame">
+          {/* XY1 */}
+          <rect
+            className="hover:cursor-nesw-resize"
+            onMouseDown={() => setResizeVector('nordwest')}
+            onMouseUp={onMouseUp}
+            x={element.x1}
+            y={element.y1}
+            width="10"
+            height="10"
+            stroke="blue"
+            fill="white"
+          />
+          {/* XY2 */}
+          <rect
+            className="hover:cursor-nesw-resize"
+            onMouseDown={() => setResizeVector('nordeast')}
+            onMouseUp={onMouseUp}
+            x={element.x2}
+            y={element.y2}
+            width="10"
+            height="10"
+            stroke="blue"
+            fill="white"
+          />
+        </g>
+      )}
+    </>
   );
 };
 
diff --git a/src/components/Toolbar.tsx b/src/components/Toolbar.tsx
index 883cd5f..295c862 100644
--- a/src/components/Toolbar.tsx
+++ b/src/components/Toolbar.tsx
@@ -31,7 +31,6 @@ const Toolbar = () => {
         markerEnd: type_name === 'arrow_line' ? 'url(#arrow)' : '',
         width: type_name === 'image' ? 100 : 1,
         height: type_name === 'image' ? 100 : 1,
-        fill: type_name === 'text' ? 'transparent' : 'none',
       };
     });
     setSelectedElement([]);
diff --git a/src/components/Zoom.tsx b/src/components/Zoom.tsx
index 8cbd1cd..6228a87 100644
--- a/src/components/Zoom.tsx
+++ b/src/components/Zoom.tsx
@@ -7,7 +7,6 @@ const Zoom = () => {
   const [, zoomCanvas] = useAtom(zoomCanvasAtom);
 
   return (
-    // h-fit w-fit px-2 fixed bottom-3 flex justify-center items-center gap-4 border-[1px] border-black
     <div className="w-[50%] flex justify-between items-center bg-gray-200 rounded-lg p-1">
       <button
         id="zoomdown"
diff --git a/src/components/inspectorElements/ColorsPalette.tsx b/src/components/inspectorElements/ColorsPalette.tsx
index de832f7..7022ad6 100644
--- a/src/components/inspectorElements/ColorsPalette.tsx
+++ b/src/components/inspectorElements/ColorsPalette.tsx
@@ -25,14 +25,7 @@ const ColorsPalette = ({ targetProp, handlerClick, activeColor }: Props) => {
           }}
           onClick={() =>
             handlerClick({
-              types: [
-                'rect',
-                'ellipse',
-                'line',
-                'polygon',
-                'foreignObject',
-                'path',
-              ],
+              types: ['rect', 'ellipse', 'polygon', 'foreignObject'],
               [targetProp]: color,
             })
           }
diff --git a/src/store/store.ts b/src/store/store.ts
index ad6d018..600e004 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -35,7 +35,7 @@ const initialElement: Element = {
   strokeWidth: 4,
   strokeDasharray: "",
   strokeLinecap: undefined,
-  fill: 'none',
+  fill: 'transparent',
   fontSize: "28px",
   opacity: "1",
 }
@@ -255,8 +255,6 @@ export const onDragStartAtom = atom(
         } else {
           set(selectedElementAtom, [element])
         }
-      } else {
-        set(selectedElementAtom, [element])
       }
       set(isDraggingAtom, true)
     }
@@ -360,6 +358,28 @@ export const onMouseMoveAtom = atom(
       }
 
       set(selectingAreaAtom, { ...selectingArea, endX: update.x, endY: update.y })
+
+      // multy select by selectingArea
+      const resizeVector = get(resizeVectorAtom)
+      if (!get(isDraggingAtom) && !get(isDrawingAtom) && !resizeVector) {
+        if (selectingArea) {
+          const areaStartX = selectingArea.startX < selectingArea.endX ? selectingArea.startX : selectingArea.endX
+          const areaStartY = selectingArea.startY < selectingArea.endY ? selectingArea.startY : selectingArea.endY
+          get(elementsAtom).map((element) => {
+            // if element in area
+            if (
+              element.x > areaStartX &&
+              element.y > areaStartY &&
+              element.x + element.width < areaStartX + Math.abs(selectingArea.endX - selectingArea.startX) &&
+              element.y + element.height < areaStartY + Math.abs(selectingArea.endY - selectingArea.startY)
+            ) {
+              set(selectedElementAtom, (prev) => [...prev, element]);
+            } else {
+              set(selectedElementAtom, (prev) => prev.filter((el) => element.id !== el.id));
+            }
+          })
+        }
+      }
     }
 
     // this is necessary to display the selected image preview and to move this image following the cursor
@@ -379,7 +399,6 @@ export const onMouseUpAtom = atom(
     // console.log("onMouseUpAtom")
     const creationInitialElement = get(creationInitialElementAtom)
     const selectedElement = get(selectedElementAtom)
-    const selectingArea = get(selectingAreaAtom)
 
     // update selected el from original element
     if (selectedElement.length > 0) {
@@ -388,24 +407,7 @@ export const onMouseUpAtom = atom(
       set(selectedElementAtom, newSelectedEl)
     }
 
-    // multy select by selectingArea
-    if (!get(isDraggingAtom) && !get(isDrawingAtom)) {
-      if (selectingArea) {
-        const areaStartX = selectingArea.startX < selectingArea.endX ? selectingArea.startX : selectingArea.endX
-        const areaStartY = selectingArea.startY < selectingArea.endY ? selectingArea.startY : selectingArea.endY
-        get(elementsAtom).map((element) => {
-          // if element in area
-          if (
-            element.x > areaStartX &&
-            element.y > areaStartY &&
-            element.x + element.width < areaStartX + Math.abs(selectingArea.endX - selectingArea.startX) &&
-            element.y + element.height < areaStartY + Math.abs(selectingArea.endY - selectingArea.startY)
-          ) {
-            set(selectedElementAtom, (prev) => [...prev, element]);
-          }
-        })
-      }
-    }
+
 
     set(resizeVectorAtom, "")
     set(isDraggingAtom, false)

From 14c7291a7b94d5666be0b4a78f8d76c002118c4a Mon Sep 17 00:00:00 2001
From: KirillSerg <kirill.sergienko1989@gmail.com>
Date: Wed, 4 Sep 2024 16:45:41 +0300
Subject: [PATCH 4/5] fix: folder structure

---
 src/App.tsx                                   | 10 ++++----
 src/components/{ => canvas}/Canvas.tsx        | 10 ++++----
 .../canvasElements}/HistoryControls.tsx       |  2 +-
 .../canvasElements}/SelectingArea.tsx         |  4 ++--
 .../{ => canvas/canvasElements}/Zoom.tsx      |  4 ++--
 src/components/{ => inspector}/Inspector.tsx  | 10 ++++----
 .../inspectorElements/ColorsPalette.tsx       |  6 ++---
 .../inspectorElements/DuplicateProp.tsx       |  2 +-
 .../inspectorElements/EdgeRoundProp.tsx       |  2 +-
 .../inspectorElements/EdgeSharpProp.tsx       |  2 +-
 .../inspectorElements/LayersBtn.tsx           |  0
 .../inspectorElements/LineArrowProp.tsx       |  2 +-
 .../inspectorElements/LineProp.tsx            |  2 +-
 .../inspectorElements/OpacityProp.tsx         |  2 +-
 .../inspectorElements/StrokeStyleProp.tsx     |  2 +-
 .../inspectorElements/StrokeWidthProp.tsx     |  2 +-
 .../{ => singleElement}/SelectingFrame.tsx    |  4 ++--
 .../{ => singleElement}/SingleElement.tsx     |  6 ++---
 .../Textarea.tsx                              |  4 ++--
 src/components/{ => toolbar}/Toolbar.tsx      | 24 +++++++++----------
 .../toolbarElements}/EllipseIconBtn.tsx       |  2 +-
 .../toolbarElements}/FreeIconBtn.tsx          |  2 +-
 .../toolbarElements}/GrabIconBtn copy.tsx     |  2 +-
 .../toolbarElements}/ImageIconBtn.tsx         |  4 ++--
 .../toolbarElements}/LineArrowIconBtn.tsx     |  2 +-
 .../toolbarElements}/LineIconBtn.tsx          |  2 +-
 .../toolbarElements}/PencilIconBtn.tsx        |  2 +-
 .../toolbarElements}/RectIconBtn.tsx          |  2 +-
 .../toolbarElements}/TextIconBtn.tsx          |  0
 .../toolbarElements}/TriangleIconBtn.tsx      |  2 +-
 30 files changed, 60 insertions(+), 60 deletions(-)
 rename src/components/{ => canvas}/Canvas.tsx (93%)
 rename src/components/{ => canvas/canvasElements}/HistoryControls.tsx (98%)
 rename src/components/{ => canvas/canvasElements}/SelectingArea.tsx (81%)
 rename src/components/{ => canvas/canvasElements}/Zoom.tsx (87%)
 rename src/components/{ => inspector}/Inspector.tsx (97%)
 rename src/components/{ => inspector}/inspectorElements/ColorsPalette.tsx (84%)
 rename src/components/{ => inspector}/inspectorElements/DuplicateProp.tsx (95%)
 rename src/components/{ => inspector}/inspectorElements/EdgeRoundProp.tsx (96%)
 rename src/components/{ => inspector}/inspectorElements/EdgeSharpProp.tsx (95%)
 rename src/components/{ => inspector}/inspectorElements/LayersBtn.tsx (100%)
 rename src/components/{ => inspector}/inspectorElements/LineArrowProp.tsx (94%)
 rename src/components/{ => inspector}/inspectorElements/LineProp.tsx (92%)
 rename src/components/{ => inspector}/inspectorElements/OpacityProp.tsx (92%)
 rename src/components/{ => inspector}/inspectorElements/StrokeStyleProp.tsx (95%)
 rename src/components/{ => inspector}/inspectorElements/StrokeWidthProp.tsx (93%)
 rename src/components/{ => singleElement}/SelectingFrame.tsx (97%)
 rename src/components/{ => singleElement}/SingleElement.tsx (91%)
 rename src/components/{elements/textElement => singleElement}/Textarea.tsx (94%)
 rename src/components/{ => toolbar}/Toolbar.tsx (82%)
 rename src/components/{elements => toolbar/toolbarElements}/EllipseIconBtn.tsx (92%)
 rename src/components/{elements => toolbar/toolbarElements}/FreeIconBtn.tsx (93%)
 rename src/components/{elements => toolbar/toolbarElements}/GrabIconBtn copy.tsx (96%)
 rename src/components/{elements => toolbar/toolbarElements}/ImageIconBtn.tsx (94%)
 rename src/components/{elements => toolbar/toolbarElements}/LineArrowIconBtn.tsx (94%)
 rename src/components/{elements => toolbar/toolbarElements}/LineIconBtn.tsx (91%)
 rename src/components/{elements => toolbar/toolbarElements}/PencilIconBtn.tsx (96%)
 rename src/components/{elements => toolbar/toolbarElements}/RectIconBtn.tsx (92%)
 rename src/components/{elements/textElement => toolbar/toolbarElements}/TextIconBtn.tsx (100%)
 rename src/components/{elements => toolbar/toolbarElements}/TriangleIconBtn.tsx (92%)

diff --git a/src/App.tsx b/src/App.tsx
index f228328..b7f8652 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,10 +1,10 @@
 import { useAtom, useAtomValue } from 'jotai';
-import Canvas from './components/Canvas';
-import Inspector from './components/Inspector';
-import Toolbar from './components/Toolbar';
-import Zoom from './components/Zoom';
+import Canvas from './components/canvas/Canvas';
+import Inspector from './components/inspector/Inspector';
+import Toolbar from './components/toolbar/Toolbar';
+import Zoom from './components/canvas/canvasElements/Zoom';
 import { isDrawingAtom, onKeyPressAtom } from './store/store';
-import HistoryControls from './components/HistoryControls';
+import HistoryControls from './components/canvas/canvasElements/HistoryControls';
 
 const App = () => {
   const [, onKeyPress] = useAtom(onKeyPressAtom);
diff --git a/src/components/Canvas.tsx b/src/components/canvas/Canvas.tsx
similarity index 93%
rename from src/components/Canvas.tsx
rename to src/components/canvas/Canvas.tsx
index 954edd4..541df82 100644
--- a/src/components/Canvas.tsx
+++ b/src/components/canvas/Canvas.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 import { useAtom, useAtomValue } from 'jotai';
-import SingleElement from './SingleElement';
-import SelectingArea from './SelectingArea';
+import SingleElement from '../singleElement/SingleElement';
+import SelectingArea from './canvasElements/SelectingArea';
 import {
   onMouseUpAtom,
   elementsAtom,
@@ -16,9 +16,9 @@ import {
   selectingAreaAtom,
   grabCanvasAtom,
   resizeVectorAtom,
-} from '../store/store';
-import { ElemenEvent, ZoomCanvasFn } from '../types/CommonTypes';
-import { transformCoordinates } from '../assets/utilities';
+} from '../../store/store';
+import { ElemenEvent, ZoomCanvasFn } from '../../types/CommonTypes';
+import { transformCoordinates } from '../../assets/utilities';
 
 const Canvas = () => {
   const elements = useAtomValue(elementsAtom);
diff --git a/src/components/HistoryControls.tsx b/src/components/canvas/canvasElements/HistoryControls.tsx
similarity index 98%
rename from src/components/HistoryControls.tsx
rename to src/components/canvas/canvasElements/HistoryControls.tsx
index 341f365..ae62338 100644
--- a/src/components/HistoryControls.tsx
+++ b/src/components/canvas/canvasElements/HistoryControls.tsx
@@ -3,7 +3,7 @@ import {
   currentHistoryIndexAtom,
   historyAtom,
   useHistoryAtom,
-} from '../store/store';
+} from '../../../store/store';
 
 const HistoryControls = () => {
   const [, doRedo] = useAtom(useHistoryAtom);
diff --git a/src/components/SelectingArea.tsx b/src/components/canvas/canvasElements/SelectingArea.tsx
similarity index 81%
rename from src/components/SelectingArea.tsx
rename to src/components/canvas/canvasElements/SelectingArea.tsx
index 4d30ed3..5589114 100644
--- a/src/components/SelectingArea.tsx
+++ b/src/components/canvas/canvasElements/SelectingArea.tsx
@@ -1,6 +1,6 @@
 import { useAtomValue } from 'jotai';
-import { selectingAreaAtom } from '../store/store';
-import { useUpdateXYAndDistance } from '../assets/utilities';
+import { selectingAreaAtom } from '../../../store/store';
+import { useUpdateXYAndDistance } from '../../../assets/utilities';
 
 const SelectingArea = () => {
   const selectingArea = useAtomValue(selectingAreaAtom);
diff --git a/src/components/Zoom.tsx b/src/components/canvas/canvasElements/Zoom.tsx
similarity index 87%
rename from src/components/Zoom.tsx
rename to src/components/canvas/canvasElements/Zoom.tsx
index 6228a87..198af79 100644
--- a/src/components/Zoom.tsx
+++ b/src/components/canvas/canvasElements/Zoom.tsx
@@ -1,6 +1,6 @@
 import { useAtom, useAtomValue } from 'jotai';
-import { canvasViewBoxAtom, zoomCanvasAtom } from '../store/store';
-import { ZoomCanvasFn } from '../types/CommonTypes';
+import { canvasViewBoxAtom, zoomCanvasAtom } from '../../../store/store';
+import { ZoomCanvasFn } from '../../../types/CommonTypes';
 
 const Zoom = () => {
   const canvasViewBox = useAtomValue(canvasViewBoxAtom);
diff --git a/src/components/Inspector.tsx b/src/components/inspector/Inspector.tsx
similarity index 97%
rename from src/components/Inspector.tsx
rename to src/components/inspector/Inspector.tsx
index aefd49f..ffbe714 100644
--- a/src/components/Inspector.tsx
+++ b/src/components/inspector/Inspector.tsx
@@ -7,11 +7,11 @@ import {
   updateElementsAtom,
   isDrawingAtom,
   setLayersAtom,
-} from '../store/store';
+} from '../../store/store';
 import LineArrowProp from './inspectorElements/LineArrowProp';
 import LineProp from './inspectorElements/LineProp';
 import EdgeRoundProp from './inspectorElements/EdgeRoundProp';
-import { getBorderRadius } from '../assets/utilities';
+import { getBorderRadius } from '../../assets/utilities';
 import EdgeSharpProp from './inspectorElements/EdgeSharpProp';
 import OpacityProp from './inspectorElements/OpacityProp';
 import StrokeWidthProp from './inspectorElements/StrokeWidthProp';
@@ -20,13 +20,13 @@ import StrokeStyleProp from './inspectorElements/StrokeStyleProp';
 import DuplicateProp from './inspectorElements/DuplicateProp';
 import LayersBtn from './inspectorElements/LayersBtn';
 
-import { ElementProps } from '../types/CommonTypes';
+import { ElementProps } from '../../types/CommonTypes';
 
-import deleteIcon from '../assets/icons/trash.svg';
+import deleteIcon from '../../assets/icons/trash.svg';
 import {
   IconLayerToBackFront,
   IconLayerToBackwardForward,
-} from '../assets/icons/Icons';
+} from '../../assets/icons/Icons';
 
 const Inspector = () => {
   const [, deleteElements] = useAtom(deleteElementsAtom);
diff --git a/src/components/inspectorElements/ColorsPalette.tsx b/src/components/inspector/inspectorElements/ColorsPalette.tsx
similarity index 84%
rename from src/components/inspectorElements/ColorsPalette.tsx
rename to src/components/inspector/inspectorElements/ColorsPalette.tsx
index 7022ad6..0b37e11 100644
--- a/src/components/inspectorElements/ColorsPalette.tsx
+++ b/src/components/inspector/inspectorElements/ColorsPalette.tsx
@@ -1,6 +1,6 @@
-import { colorsPalette } from '../../assets/utilities';
-import { ElementProps } from '../../types/CommonTypes';
-import transparentFone from '../../assets/icons/transparentBG.png';
+import { colorsPalette } from '../../../assets/utilities';
+import { ElementProps } from '../../../types/CommonTypes';
+import transparentFone from '../../../assets/icons/transparentBG.png';
 
 interface Props {
   targetProp: string;
diff --git a/src/components/inspectorElements/DuplicateProp.tsx b/src/components/inspector/inspectorElements/DuplicateProp.tsx
similarity index 95%
rename from src/components/inspectorElements/DuplicateProp.tsx
rename to src/components/inspector/inspectorElements/DuplicateProp.tsx
index a2984ba..f6c6e9c 100644
--- a/src/components/inspectorElements/DuplicateProp.tsx
+++ b/src/components/inspector/inspectorElements/DuplicateProp.tsx
@@ -1,5 +1,5 @@
 import { useAtom } from 'jotai';
-import { duplicateAtom } from '../../store/store';
+import { duplicateAtom } from '../../../store/store';
 
 const DuplicateProp = () => {
   const [, setDuplicate] = useAtom(duplicateAtom);
diff --git a/src/components/inspectorElements/EdgeRoundProp.tsx b/src/components/inspector/inspectorElements/EdgeRoundProp.tsx
similarity index 96%
rename from src/components/inspectorElements/EdgeRoundProp.tsx
rename to src/components/inspector/inspectorElements/EdgeRoundProp.tsx
index 8693774..1393085 100644
--- a/src/components/inspectorElements/EdgeRoundProp.tsx
+++ b/src/components/inspector/inspectorElements/EdgeRoundProp.tsx
@@ -1,4 +1,4 @@
-import { ElementProps } from '../../types/CommonTypes';
+import { ElementProps } from '../../../types/CommonTypes';
 
 interface Props {
   className: string;
diff --git a/src/components/inspectorElements/EdgeSharpProp.tsx b/src/components/inspector/inspectorElements/EdgeSharpProp.tsx
similarity index 95%
rename from src/components/inspectorElements/EdgeSharpProp.tsx
rename to src/components/inspector/inspectorElements/EdgeSharpProp.tsx
index f4a3dbc..a9cef72 100644
--- a/src/components/inspectorElements/EdgeSharpProp.tsx
+++ b/src/components/inspector/inspectorElements/EdgeSharpProp.tsx
@@ -1,4 +1,4 @@
-import { ElementProps } from '../../types/CommonTypes';
+import { ElementProps } from '../../../types/CommonTypes';
 
 interface Props {
   className: string;
diff --git a/src/components/inspectorElements/LayersBtn.tsx b/src/components/inspector/inspectorElements/LayersBtn.tsx
similarity index 100%
rename from src/components/inspectorElements/LayersBtn.tsx
rename to src/components/inspector/inspectorElements/LayersBtn.tsx
diff --git a/src/components/inspectorElements/LineArrowProp.tsx b/src/components/inspector/inspectorElements/LineArrowProp.tsx
similarity index 94%
rename from src/components/inspectorElements/LineArrowProp.tsx
rename to src/components/inspector/inspectorElements/LineArrowProp.tsx
index 9e94e12..863893a 100644
--- a/src/components/inspectorElements/LineArrowProp.tsx
+++ b/src/components/inspector/inspectorElements/LineArrowProp.tsx
@@ -1,4 +1,4 @@
-import { ElementProps } from '../../types/CommonTypes';
+import { ElementProps } from '../../../types/CommonTypes';
 
 interface Props {
   className: string;
diff --git a/src/components/inspectorElements/LineProp.tsx b/src/components/inspector/inspectorElements/LineProp.tsx
similarity index 92%
rename from src/components/inspectorElements/LineProp.tsx
rename to src/components/inspector/inspectorElements/LineProp.tsx
index 9a27b03..15c2fc2 100644
--- a/src/components/inspectorElements/LineProp.tsx
+++ b/src/components/inspector/inspectorElements/LineProp.tsx
@@ -1,4 +1,4 @@
-import { ElementProps } from '../../types/CommonTypes';
+import { ElementProps } from '../../../types/CommonTypes';
 
 interface Props {
   className: string;
diff --git a/src/components/inspectorElements/OpacityProp.tsx b/src/components/inspector/inspectorElements/OpacityProp.tsx
similarity index 92%
rename from src/components/inspectorElements/OpacityProp.tsx
rename to src/components/inspector/inspectorElements/OpacityProp.tsx
index 017af06..1ad330c 100644
--- a/src/components/inspectorElements/OpacityProp.tsx
+++ b/src/components/inspector/inspectorElements/OpacityProp.tsx
@@ -1,4 +1,4 @@
-import { ElementProps } from '../../types/CommonTypes';
+import { ElementProps } from '../../../types/CommonTypes';
 
 interface Props {
   className?: string;
diff --git a/src/components/inspectorElements/StrokeStyleProp.tsx b/src/components/inspector/inspectorElements/StrokeStyleProp.tsx
similarity index 95%
rename from src/components/inspectorElements/StrokeStyleProp.tsx
rename to src/components/inspector/inspectorElements/StrokeStyleProp.tsx
index 2bec96b..7267120 100644
--- a/src/components/inspectorElements/StrokeStyleProp.tsx
+++ b/src/components/inspector/inspectorElements/StrokeStyleProp.tsx
@@ -1,4 +1,4 @@
-import { ElementProps } from '../../types/CommonTypes';
+import { ElementProps } from '../../../types/CommonTypes';
 
 interface Props {
   className?: string;
diff --git a/src/components/inspectorElements/StrokeWidthProp.tsx b/src/components/inspector/inspectorElements/StrokeWidthProp.tsx
similarity index 93%
rename from src/components/inspectorElements/StrokeWidthProp.tsx
rename to src/components/inspector/inspectorElements/StrokeWidthProp.tsx
index 8693acf..81c45f4 100644
--- a/src/components/inspectorElements/StrokeWidthProp.tsx
+++ b/src/components/inspector/inspectorElements/StrokeWidthProp.tsx
@@ -1,4 +1,4 @@
-import { ElementProps } from '../../types/CommonTypes';
+import { ElementProps } from '../../../types/CommonTypes';
 
 interface Props {
   className?: string;
diff --git a/src/components/SelectingFrame.tsx b/src/components/singleElement/SelectingFrame.tsx
similarity index 97%
rename from src/components/SelectingFrame.tsx
rename to src/components/singleElement/SelectingFrame.tsx
index 7407339..bd01e97 100644
--- a/src/components/SelectingFrame.tsx
+++ b/src/components/singleElement/SelectingFrame.tsx
@@ -1,6 +1,6 @@
 import { useAtom } from 'jotai';
-import { onMouseUpAtom, resizeVectorAtom } from '../store/store';
-import { Element } from '../types/CommonTypes';
+import { onMouseUpAtom, resizeVectorAtom } from '../../store/store';
+import { Element } from '../../types/CommonTypes';
 
 interface Props {
   element: Element;
diff --git a/src/components/SingleElement.tsx b/src/components/singleElement/SingleElement.tsx
similarity index 91%
rename from src/components/SingleElement.tsx
rename to src/components/singleElement/SingleElement.tsx
index 92f97f0..43e7d02 100644
--- a/src/components/SingleElement.tsx
+++ b/src/components/singleElement/SingleElement.tsx
@@ -1,12 +1,12 @@
-import Textarea from './elements/textElement/Textarea';
+import Textarea from './Textarea';
 import { useAtom, useAtomValue } from 'jotai';
 import {
   isDrawingAtom,
   onDragStartAtom,
   onMouseUpAtom,
   selectedElementAtom,
-} from '../store/store';
-import { Element } from '../types/CommonTypes';
+} from '../../store/store';
+import { Element } from '../../types/CommonTypes';
 import SelectingFrame from './SelectingFrame';
 
 interface Props {
diff --git a/src/components/elements/textElement/Textarea.tsx b/src/components/singleElement/Textarea.tsx
similarity index 94%
rename from src/components/elements/textElement/Textarea.tsx
rename to src/components/singleElement/Textarea.tsx
index 317d0e3..5a993f0 100644
--- a/src/components/elements/textElement/Textarea.tsx
+++ b/src/components/singleElement/Textarea.tsx
@@ -4,8 +4,8 @@ import {
   isDrawingAtom,
   setHistoryAtom,
   updateElementsAtom,
-} from '../../../store/store';
-import { Element } from '../../../types/CommonTypes';
+} from '../../store/store';
+import { Element } from '../../types/CommonTypes';
 
 type Props = {
   element: Element;
diff --git a/src/components/Toolbar.tsx b/src/components/toolbar/Toolbar.tsx
similarity index 82%
rename from src/components/Toolbar.tsx
rename to src/components/toolbar/Toolbar.tsx
index 295c862..89a82f2 100644
--- a/src/components/Toolbar.tsx
+++ b/src/components/toolbar/Toolbar.tsx
@@ -1,19 +1,19 @@
 import { useAtom } from 'jotai';
-import LineIconBtn from './elements/LineIconBtn';
-import LineArrowIconBtn from './elements/LineArrowIconBtn';
-import TriangleIconBtn from './elements/TriangleIconBtn';
-import EllipseIconBtn from './elements/EllipseIconBtn';
-import RectIconBtn from './elements/RectIconBtn';
-import FreeIconBtn from './elements/FreeIconBtn';
-import TextIconBtn from './elements/textElement/TextIconBtn';
-import PencilIconBtn from './elements/PencilIconBtn';
-import GrabIconBtn from './elements/GrabIconBtn copy';
-import ImageIconBtn from './elements/ImageIconBtn';
+import LineIconBtn from './toolbarElements/LineIconBtn';
+import LineArrowIconBtn from './toolbarElements/LineArrowIconBtn';
+import TriangleIconBtn from './toolbarElements/TriangleIconBtn';
+import EllipseIconBtn from './toolbarElements/EllipseIconBtn';
+import RectIconBtn from './toolbarElements/RectIconBtn';
+import FreeIconBtn from './toolbarElements/FreeIconBtn';
+import TextIconBtn from './toolbarElements/TextIconBtn';
+import PencilIconBtn from './toolbarElements/PencilIconBtn';
+import GrabIconBtn from './toolbarElements/GrabIconBtn copy';
+import ImageIconBtn from './toolbarElements/ImageIconBtn';
 import {
   creationInitialElementAtom,
   selectedElementAtom,
-} from '../store/store';
-import { ELEMENT_TYPE_VARIANTS, Element } from '../types/CommonTypes';
+} from '../../store/store';
+import { ELEMENT_TYPE_VARIANTS, Element } from '../../types/CommonTypes';
 
 const Toolbar = () => {
   const [creationInitialElement, setCreationInitialElement] = useAtom(
diff --git a/src/components/elements/EllipseIconBtn.tsx b/src/components/toolbar/toolbarElements/EllipseIconBtn.tsx
similarity index 92%
rename from src/components/elements/EllipseIconBtn.tsx
rename to src/components/toolbar/toolbarElements/EllipseIconBtn.tsx
index 7872052..a69ea32 100644
--- a/src/components/elements/EllipseIconBtn.tsx
+++ b/src/components/toolbar/toolbarElements/EllipseIconBtn.tsx
@@ -1,4 +1,4 @@
-import { Element } from '../../types/CommonTypes';
+import { Element } from '../../../types/CommonTypes';
 
 interface Props {
   className: string;
diff --git a/src/components/elements/FreeIconBtn.tsx b/src/components/toolbar/toolbarElements/FreeIconBtn.tsx
similarity index 93%
rename from src/components/elements/FreeIconBtn.tsx
rename to src/components/toolbar/toolbarElements/FreeIconBtn.tsx
index a93023c..af4f40e 100644
--- a/src/components/elements/FreeIconBtn.tsx
+++ b/src/components/toolbar/toolbarElements/FreeIconBtn.tsx
@@ -1,4 +1,4 @@
-import { Element } from '../../types/CommonTypes';
+import { Element } from '../../../types/CommonTypes';
 
 interface Props {
   className: string;
diff --git a/src/components/elements/GrabIconBtn copy.tsx b/src/components/toolbar/toolbarElements/GrabIconBtn copy.tsx
similarity index 96%
rename from src/components/elements/GrabIconBtn copy.tsx
rename to src/components/toolbar/toolbarElements/GrabIconBtn copy.tsx
index 2b46f27..960f6a8 100644
--- a/src/components/elements/GrabIconBtn copy.tsx	
+++ b/src/components/toolbar/toolbarElements/GrabIconBtn copy.tsx	
@@ -1,4 +1,4 @@
-import { Element } from '../../types/CommonTypes';
+import { Element } from '../../../types/CommonTypes';
 
 interface Props {
   className: string;
diff --git a/src/components/elements/ImageIconBtn.tsx b/src/components/toolbar/toolbarElements/ImageIconBtn.tsx
similarity index 94%
rename from src/components/elements/ImageIconBtn.tsx
rename to src/components/toolbar/toolbarElements/ImageIconBtn.tsx
index e5cfa8d..ee09114 100644
--- a/src/components/elements/ImageIconBtn.tsx
+++ b/src/components/toolbar/toolbarElements/ImageIconBtn.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 import { useAtom } from 'jotai';
-import { Element } from '../../types/CommonTypes';
-import { creationInitialElementAtom } from '../../store/store';
+import { Element } from '../../../types/CommonTypes';
+import { creationInitialElementAtom } from '../../../store/store';
 
 interface Props {
   className: string;
diff --git a/src/components/elements/LineArrowIconBtn.tsx b/src/components/toolbar/toolbarElements/LineArrowIconBtn.tsx
similarity index 94%
rename from src/components/elements/LineArrowIconBtn.tsx
rename to src/components/toolbar/toolbarElements/LineArrowIconBtn.tsx
index 840a527..ea165c8 100644
--- a/src/components/elements/LineArrowIconBtn.tsx
+++ b/src/components/toolbar/toolbarElements/LineArrowIconBtn.tsx
@@ -1,4 +1,4 @@
-import { Element } from '../../types/CommonTypes';
+import { Element } from '../../../types/CommonTypes';
 
 interface Props {
   className: string;
diff --git a/src/components/elements/LineIconBtn.tsx b/src/components/toolbar/toolbarElements/LineIconBtn.tsx
similarity index 91%
rename from src/components/elements/LineIconBtn.tsx
rename to src/components/toolbar/toolbarElements/LineIconBtn.tsx
index 407ef43..a755e75 100644
--- a/src/components/elements/LineIconBtn.tsx
+++ b/src/components/toolbar/toolbarElements/LineIconBtn.tsx
@@ -1,4 +1,4 @@
-import { Element } from '../../types/CommonTypes';
+import { Element } from '../../../types/CommonTypes';
 
 interface Props {
   className: string;
diff --git a/src/components/elements/PencilIconBtn.tsx b/src/components/toolbar/toolbarElements/PencilIconBtn.tsx
similarity index 96%
rename from src/components/elements/PencilIconBtn.tsx
rename to src/components/toolbar/toolbarElements/PencilIconBtn.tsx
index 8fa6d81..85f1d6c 100644
--- a/src/components/elements/PencilIconBtn.tsx
+++ b/src/components/toolbar/toolbarElements/PencilIconBtn.tsx
@@ -1,4 +1,4 @@
-import { Element } from '../../types/CommonTypes';
+import { Element } from '../../../types/CommonTypes';
 
 interface Props {
   className: string;
diff --git a/src/components/elements/RectIconBtn.tsx b/src/components/toolbar/toolbarElements/RectIconBtn.tsx
similarity index 92%
rename from src/components/elements/RectIconBtn.tsx
rename to src/components/toolbar/toolbarElements/RectIconBtn.tsx
index a35bc8c..931f3eb 100644
--- a/src/components/elements/RectIconBtn.tsx
+++ b/src/components/toolbar/toolbarElements/RectIconBtn.tsx
@@ -1,4 +1,4 @@
-import { Element } from '../../types/CommonTypes';
+import { Element } from '../../../types/CommonTypes';
 
 interface Props {
   className: string;
diff --git a/src/components/elements/textElement/TextIconBtn.tsx b/src/components/toolbar/toolbarElements/TextIconBtn.tsx
similarity index 100%
rename from src/components/elements/textElement/TextIconBtn.tsx
rename to src/components/toolbar/toolbarElements/TextIconBtn.tsx
diff --git a/src/components/elements/TriangleIconBtn.tsx b/src/components/toolbar/toolbarElements/TriangleIconBtn.tsx
similarity index 92%
rename from src/components/elements/TriangleIconBtn.tsx
rename to src/components/toolbar/toolbarElements/TriangleIconBtn.tsx
index 2fa989d..a16bde9 100644
--- a/src/components/elements/TriangleIconBtn.tsx
+++ b/src/components/toolbar/toolbarElements/TriangleIconBtn.tsx
@@ -1,4 +1,4 @@
-import { Element } from '../../types/CommonTypes';
+import { Element } from '../../../types/CommonTypes';
 
 interface Props {
   className: string;

From 726dcaeefb93fe0c3ab3a4e61dd3b6a516df034d Mon Sep 17 00:00:00 2001
From: KirillSerg <kirill.sergienko1989@gmail.com>
Date: Wed, 4 Sep 2024 18:31:38 +0300
Subject: [PATCH 5/5] fix: tests

---
 UItests/test.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/UItests/test.spec.ts b/UItests/test.spec.ts
index 984db06..61db0bd 100644
--- a/UItests/test.spec.ts
+++ b/UItests/test.spec.ts
@@ -195,7 +195,6 @@ test("Grab canvas", async ({ page }) => {
 
 test("Selecting frame", async ({ page }) => {
   await page.goto('http://localhost:5173/');
-
   const toolbarRect = page.locator('header > button > svg > rect')
   await toolbarRect.click()
   await page.mouse.move(300, 300);
@@ -244,6 +243,7 @@ test("Selecting frame", async ({ page }) => {
   await page.mouse.move(1, 1);
   await page.mouse.down();
   await page.mouse.move(600, 600);
+  await page.mouse.move(700, 700); // page.locator('id=frame') below is not visible if don't add this one more move
   await page.mouse.up();
   // check the numbers of frame and what it is visible
   const framesNumber = await page.locator('id=frame').count()