Draw

.eslintrc.js

@@ -11,23 +11,25 @@ module.exports = {
     "next",
     "prettier",
   ],
-  overrides : [
-  { plugins: ["react", "@typescript-eslint"],
-  files: ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"],
-  parser: "@typescript-eslint/parser",
+  overrides: [
+    {
+      plugins: ["react", "@typescript-eslint"],
+      files: ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"],
+      parser: "@typescript-eslint/parser",
 
-
-  rules: {
-    "react/no-direct-mutation-state": [
-      "error", // Keep the default as error
-      {
-        ignoreCallbacks: true, // Allow mutation within callbacks (optional)
-        mutators: ["this.setState"], // Allow mutation using this.setState (optional)
+      rules: {
+        "react/no-direct-mutation-state": [
+          "error",
+          {
+            ignoreCallbacks: true,
+            mutators: ["this.setState"],
+          },
+        ],
+        "react/no-unescaped-entities": "off",
+        "@next/next/no-page-custom-font": "off",
       },
-    ],
-    "react/no-unescaped-entities": "off",
-    "@next/next/no-page-custom-font": "off",
-  },}],
+    },
+  ],
   parserOptions: {
     ecmaFeatures: {
       jsx: true,
@@ -36,4 +38,3 @@ module.exports = {
     sourceType: "module",
   },
 };
-// eslint-disable-next-line no-undef

.eslintrc.json

@@ -1,3 +1,7 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:testing-library/react",
+    "plugin:jest-dom/recommended"
+  ]
 }

.github/workflows/greetings.yaml

@@ -9,8 +9,8 @@ jobs:
       issues: write
       pull-requests: write
     steps:
-    - uses: actions/first-interaction@v1
-      with:
-        repo-token: ${{ secrets.GITHUB_TOKEN }}
-        issue-message: "Hi there! Thanks for opening this issue. We appreciate your contribution to this open-source project. We aim to respond or assign your issue as soon as possible."
-        pr-message: "Welcome to Our repository.🎊 Thank you so much for taking the time to point this out."
+      - uses: actions/first-interaction@v1
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          issue-message: "Hi there! Thanks for opening this issue. We appreciate your contribution to this open-source project. We aim to respond or assign your issue as soon as possible."
+          pr-message: "Welcome to Our repository.🎊 Thank you so much for taking the time to point this out."

.husky/pre-commit

@@ -7,6 +7,9 @@ npm run test ||
     echo 'Jest test failed. '
     false;
 )
+
+
+
 # check prettier standards
 npm run check-format ||
 (

__tests__/store.test.js

@@ -0,0 +1,23 @@
+// store.test.js
+import store from "../app/store";
+
+describe("Redux store configuration", () => {
+  it("should create a store with the correct reducers", () => {
+    const state = store.getState();
+
+    expect(state.tool).toBeDefined();
+    expect(state.elements).toBeDefined();
+    expect(state.canvas).toBeDefined();
+    expect(state.action).toBeDefined();
+    expect(state.hover).toBeDefined();
+    expect(state.selectedElement).toBeDefined();
+    expect(state.resizeDirection).toBeDefined();
+    expect(state.oldElement).toBeDefined();
+  });
+
+  it("should apply middleware configuration correctly", () => {
+    const actions = store.dispatch({ type: "canvas/setCanvas", payload: {} });
+
+    expect(actions.type).toBe("canvas/setCanvas");
+  });
+});

app/layout.js

@@ -2,6 +2,8 @@ import { Toaster } from "@/components/ui/toaster";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import { Analytics } from "@vercel/analytics/react";
+import React from "react";
+import PropTypes from "prop-types";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -20,4 +22,8 @@ export default function RootLayout({ children }) {
       </body>
     </html>
   );
-}
+}
+
+RootLayout.propTypes = {
+  children: PropTypes.node.isRequired,
+};

app/page.js

@@ -3,6 +3,7 @@
 import { Provider } from "react-redux";
 import store from "./store";
 import App from "@/components/app";
+import React from "react";
 
 export default function Home() {
   return (
@@ -12,4 +13,4 @@ export default function Home() {
       </Provider>
     </main>
   );
-}
+}

components/Canvas.jsx

@@ -860,4 +860,4 @@ const Canvas = () => {
 
   )
 }
-export default Canvas
+export default Canvas

components/Drawing/Drawing.js

@@ -1,14 +1,11 @@
-
 import store from "@/app/store";
 import { drawBounds } from "../ElementManipulation/Bounds";
-import { getElementObject, updateElement } from "../ElementManipulation/Element";
+import {
+  getElementObject,
+  updateElement,
+} from "../ElementManipulation/Element";
 import { ShapeCache } from "../Redux/ShapeCache";
 
-
-
-
-
-
 export const draw = (event) => {
   const histIndex = store.getState().elements.index;
   const elements = store.getState().elements.value[histIndex][0];
@@ -19,87 +16,74 @@ export const draw = (event) => {
 
     const { id, x1, y1, type } = elements[index];
 
-    updateElement(id, x1, y1, event.clientX, event.clientY, type)
+    updateElement(id, x1, y1, event.clientX, event.clientY, type);
   }
-}
+};
 
 // the main function that is responsilbe for rendering
 export const drawElements = (ctx, element) => {
-
   const roughCanvasRef = store.getState().canvas.value;
 
-
-
-
   switch (element.type) {
     case "line":
     case "rectangle":
     case "ellipse":
     case "diamond":
       if (ShapeCache.cache.has(element)) {
-
-
         roughCanvasRef.draw(ShapeCache.cache.get(element));
       } else {
-
         roughCanvasRef.draw(getElementObject(element));
       }
       break;
 
-    case 'pencil':
+    case "pencil":
       ctx.fillStyle = element.stroke;
       if (ShapeCache.cache.has(element)) {
-
         ctx.fill(ShapeCache.cache.get(element));
       } else {
         ctx.fill(getElementObject(element));
       }
 
       break;
 
-
     case "text":
-
       ctx.textBaseline = "top";
       ctx.font = `${element.fontStyle} ${element.fontWeight} ${element.fontSize}px Virgil`;
 
       var txt = element.text;
 
       var lineheight = element.fontSize + 6;
-      var lines = txt.split('\n');
+      var lines = txt.split("\n");
       ctx.fillStyle = element.stroke;
       for (var i = 0; i < lines.length; i++)
-        ctx.fillText(lines[i], element.x1, element.y1 + 6 + (i * lineheight));
+        ctx.fillText(lines[i], element.x1, element.y1 + 6 + i * lineheight);
       break;
 
     default:
       break;
   }
-}
-
+};
 
 export const renderer = (ctx, elements, selectedElement, action, scale) => {
-
   let boundedElement = null;
 
   elements.forEach((element) => {
-
     if (element === null) {
       return;
     }
     if (selectedElement != null && selectedElement.id === element.id) {
       boundedElement = element;
     }
-    if (action === 'writing' && selectedElement != null && selectedElement.id === element.id) {
+    if (
+      action === "writing" &&
+      selectedElement != null &&
+      selectedElement.id === element.id
+    ) {
       return;
     }
 
     drawElements(ctx, element, selectedElement);
-
   });
 
-
-
   drawBounds(ctx, boundedElement, action, scale);
-
-}
+};

components/PropertiesBar/PropertiesBar.jsx

@@ -1,3 +1,4 @@
+
 import {
     Card,
     CardContent
@@ -620,4 +621,4 @@ const PropertiesBar = () => {
     )
 }
 
-export default PropertiesBar
+export default PropertiesBar

components/Redux/ShapeCache.js

@@ -1,10 +1,4 @@
-export class ShapeCache{
-
-
-
-    // we will be storing the element with the shape associated with it 
-     static cache = new WeakMap();
-
-
-
-}
+export class ShapeCache {
+  // we will be storing the element with the shape associated with it
+  static cache = new WeakMap();
+}