Merge pull request #50 from KirillSerg/styling

Styling

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();
@@ -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()

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);
@@ -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>
   );

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(),

src/components/Canvas.tsx → 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);

src/components/HistoryControls.tsx → src/components/canvas/canvasElements/HistoryControls.tsx

@@ -1,21 +1,29 @@
 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">
+    <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 +38,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 +58,6 @@ const HistoryControls = () => {
         </svg>
       </button>
     </div>
-    // </div>
   );
 };
 

src/components/SelectingArea.tsx → 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);

src/components/Zoom.tsx → src/components/canvas/canvasElements/Zoom.tsx

@@ -1,22 +1,21 @@
 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);
   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">
+    <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 +38,6 @@ const Zoom = () => {
         +
       </button>
     </div>
-    // </div>
   );
 };