From 9ef6c819b9d29ceb96e2e7b5a1649d97756a23ca Mon Sep 17 00:00:00 2001
From: KirillSerg <kirill.sergienko1989@gmail.com>
Date: Mon, 20 May 2024 21:38:28 +0300
Subject: [PATCH 1/4] feat: added arrow-line to the toolbar

---
 src/components/Toolbar.tsx | 53 +++++++++++++++++++++++++++++++-------
 1 file changed, 43 insertions(+), 10 deletions(-)

diff --git a/src/components/Toolbar.tsx b/src/components/Toolbar.tsx
index cf595c7..762e153 100644
--- a/src/components/Toolbar.tsx
+++ b/src/components/Toolbar.tsx
@@ -24,10 +24,10 @@ const Toolbar = () => {
           xmlns="http://www.w3.org/2000/svg"
         >
           <rect
-            x="0"
-            y="0"
-            width="100%"
-            height="100%"
+            x="2"
+            y="2"
+            width="20"
+            height="20"
             stroke="black"
             strokeWidth="2"
             fill="none"
@@ -44,12 +44,12 @@ const Toolbar = () => {
           xmlns="http://www.w3.org/2000/svg"
         >
           <ellipse
-            cx="50%"
-            cy="50%"
-            rx="45%"
-            ry="35%"
+            cx="12"
+            cy="12"
+            rx="10"
+            ry="7"
             stroke="black"
-            strokeWidth="10%"
+            strokeWidth="2"
             fill="none"
           />
         </svg>
@@ -65,7 +65,7 @@ const Toolbar = () => {
           xmlns="http://www.w3.org/2000/svg"
         >
           <polygon
-            points="12,0 24,24 0,24"
+            points="12,2 22,22 2,22"
             fill="none"
             stroke="black"
             strokeWidth="2"
@@ -92,6 +92,39 @@ const Toolbar = () => {
           />
         </svg>
       </button>
+
+      <button
+        className={`${creatingElementType === 'line' ? 'bg-orange-500' : 'bg-inherit'} p-[6px]`}
+        onClick={() => setCreatingElementType('line')}
+      >
+        <svg
+          viewBox="0 0 24 24"
+          height="100%"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <defs>
+            <marker
+              id="arrow"
+              markerWidth="5"
+              markerHeight="5"
+              refX="5"
+              refY="2.5"
+              orient="auto"
+            >
+              <path d="M 0 0 L 5 2.5 L 0 5" fill="none" stroke="black" />
+            </marker>
+          </defs>
+          <line
+            x1="0"
+            y1="12"
+            x2="24"
+            y2="12"
+            stroke="black"
+            strokeWidth="2"
+            marker-end="url(#arrow)"
+          />
+        </svg>
+      </button>
     </header>
   );
 };

From e898d6e6439f86a272292ef9d22a688e3807c894 Mon Sep 17 00:00:00 2001
From: KirillSerg <kirill.sergienko1989@gmail.com>
Date: Mon, 20 May 2024 23:57:06 +0300
Subject: [PATCH 2/4] feat: implemented adding arrow-line (marker)

---
 src/components/ArrowLine.tsx | 33 +++++++++++++++++++++
 src/components/Canvas.tsx    | 13 +++++++++
 src/components/Toolbar.tsx   | 56 +++++++++++++++++++++++++-----------
 src/store/store.ts           |  5 +++-
 src/types/CommonTypes.ts     |  1 +
 5 files changed, 90 insertions(+), 18 deletions(-)
 create mode 100644 src/components/ArrowLine.tsx

diff --git a/src/components/ArrowLine.tsx b/src/components/ArrowLine.tsx
new file mode 100644
index 0000000..74bcc10
--- /dev/null
+++ b/src/components/ArrowLine.tsx
@@ -0,0 +1,33 @@
+// interface Props {
+//   element: Element;
+// }
+
+// const ArrowLine = ({ element }: Props) => {
+//   return (
+//     <>
+//       <defs>
+//         <marker
+//           id="arrow"
+//           markerWidth="5"
+//           markerHeight="5"
+//           refX="5"
+//           refY="2.5"
+//           orient="auto"
+//         >
+//           <path d="M 0 0 L 5 2.5 L 0 5" fill="none" stroke="black" />
+//         </marker>
+//       </defs>
+//       <line
+//         x1="0"
+//         y1="12"
+//         x2="24"
+//         y2="12"
+//         stroke="black"
+//         strokeWidth="2"
+//         markerEnd="url(#arrow)"
+//       />
+//     </>
+//   );
+// };
+
+// export default ArrowLine;
diff --git a/src/components/Canvas.tsx b/src/components/Canvas.tsx
index 307a6ba..d8a8eb7 100644
--- a/src/components/Canvas.tsx
+++ b/src/components/Canvas.tsx
@@ -69,6 +69,19 @@ const Canvas = () => {
       xmlns="http://www.w3.org/2000/svg"
       tabIndex={0}
     >
+      <defs>
+        <marker
+          id="arrow"
+          markerWidth="5"
+          markerHeight="5"
+          refX="5"
+          refY="2.5"
+          orient="auto"
+        >
+          <path d="M 0 0 L 5 2.5 L 0 5" fill="none" stroke="black" />
+        </marker>
+      </defs>
+
       {elements.map((element) => (
         <SingleElement
           key={element.id}
diff --git a/src/components/Toolbar.tsx b/src/components/Toolbar.tsx
index 762e153..93ac6d6 100644
--- a/src/components/Toolbar.tsx
+++ b/src/components/Toolbar.tsx
@@ -1,22 +1,44 @@
+import { useState } from 'react';
 import { useAtom } from 'jotai';
-import { creatingElementTypeAtom } from '../store/store';
+import { creatingElementTypeAtom, initialElementAtom } from '../store/store';
+import { Element } from '../types/CommonTypes';
+
+const elementsType = {
+  free: 'free',
+  rect: 'rect',
+  ellipse: 'ellipse',
+  polygon: 'polygon',
+  line: 'line',
+  arrow_line: 'line',
+};
 
 const Toolbar = () => {
-  const [creatingElementType, setCreatingElementType] = useAtom(
-    creatingElementTypeAtom,
-  );
+  const [elementTypeName, setElementTypeName] =
+    useState<keyof typeof elementsType>('free');
+  const [, setCreatingElementType] = useAtom(creatingElementTypeAtom);
+  const [, setInitialElement] = useAtom(initialElementAtom);
+
+  const handlerSetElementTypeName = (typeName: keyof typeof elementsType) => {
+    setElementTypeName(typeName);
+    setCreatingElementType(elementsType[typeName] as Element['type']);
+
+    if (typeName === 'arrow_line')
+      setInitialElement((prev) => {
+        return { ...prev, markerEnd: 'url(#arrow)' };
+      });
+  };
 
   return (
     <header className="h-[6%] sticky top-0 flex justify-center gap-4 border-4 border-black">
       <button
-        className={`${creatingElementType === 'free' ? 'bg-orange-500' : 'bg-inherit'} p-[6px]`}
-        onClick={() => setCreatingElementType('free')}
+        className={`${elementTypeName === 'free' ? 'bg-orange-500' : 'bg-inherit'} p-[6px]`}
+        onClick={() => handlerSetElementTypeName('free')}
       >
         🖱️
       </button>
       <button
-        className={`${creatingElementType === 'rect' ? 'bg-orange-500' : 'bg-inherit'} p-[6px]`}
-        onClick={() => setCreatingElementType('rect')}
+        className={`${elementTypeName === 'rect' ? 'bg-orange-500' : 'bg-inherit'} p-[6px]`}
+        onClick={() => handlerSetElementTypeName('rect')}
       >
         <svg
           viewBox="0 0 24 24"
@@ -35,8 +57,8 @@ const Toolbar = () => {
         </svg>
       </button>
       <button
-        className={`${creatingElementType === 'ellipse' ? 'bg-orange-500' : 'bg-inherit'} p-[6px]`}
-        onClick={() => setCreatingElementType('ellipse')}
+        className={`${elementTypeName === 'ellipse' ? 'bg-orange-500' : 'bg-inherit'} p-[6px]`}
+        onClick={() => handlerSetElementTypeName('ellipse')}
       >
         <svg
           viewBox="0 0 24 24"
@@ -56,8 +78,8 @@ const Toolbar = () => {
       </button>
 
       <button
-        className={`${creatingElementType === 'polygon' ? 'bg-orange-500' : 'bg-inherit'} p-[6px]`}
-        onClick={() => setCreatingElementType('polygon')}
+        className={`${elementTypeName === 'polygon' ? 'bg-orange-500' : 'bg-inherit'} p-[6px]`}
+        onClick={() => handlerSetElementTypeName('polygon')}
       >
         <svg
           viewBox="0 0 24 24"
@@ -74,8 +96,8 @@ const Toolbar = () => {
       </button>
 
       <button
-        className={`${creatingElementType === 'line' ? 'bg-orange-500' : 'bg-inherit'} p-[6px]`}
-        onClick={() => setCreatingElementType('line')}
+        className={`${elementTypeName === 'line' ? 'bg-orange-500' : 'bg-inherit'} p-[6px]`}
+        onClick={() => handlerSetElementTypeName('line')}
       >
         <svg
           viewBox="0 0 24 24"
@@ -94,8 +116,8 @@ const Toolbar = () => {
       </button>
 
       <button
-        className={`${creatingElementType === 'line' ? 'bg-orange-500' : 'bg-inherit'} p-[6px]`}
-        onClick={() => setCreatingElementType('line')}
+        className={`${elementTypeName === 'arrow_line' ? 'bg-orange-500' : 'bg-inherit'} p-[6px]`}
+        onClick={() => handlerSetElementTypeName('arrow_line')}
       >
         <svg
           viewBox="0 0 24 24"
@@ -121,7 +143,7 @@ const Toolbar = () => {
             y2="12"
             stroke="black"
             strokeWidth="2"
-            marker-end="url(#arrow)"
+            markerEnd="url(#arrow)"
           />
         </svg>
       </button>
diff --git a/src/store/store.ts b/src/store/store.ts
index afc3714..159034b 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -19,11 +19,13 @@ const initialElement: Element = {
   x2: 0,
   y2: 0,
   points: "",
+  markerEnd: "",
   stroke: 'black',
   strokeWidth: 4,
   fill: 'none',
 }
 
+export const initialElementAtom = atom<Element>(initialElement)
 export const creatingElementTypeAtom = atom<Element["type"]>("free")
 export const elementsAtom = atomWithStorage<Element[]>("elements", [])
 export const selectedElementAtom = atom<Element | null>(null)
@@ -68,7 +70,7 @@ export const onMouseDownAtom = atom(
     if (get(isDrawingAtom)) {
       const creatingElementType = get(creatingElementTypeAtom)
       const newEl = {
-        ...initialElement,
+        ...get(initialElementAtom),
         type: creatingElementType,
         id: crypto.randomUUID(),
         x: update.x,
@@ -176,5 +178,6 @@ export const onMouseUpAtom = atom(
     set(creatingElementTypeAtom, "free")
     set(isDraggingAtom, false)
     set(selectingAreaAtom, null)
+    set(initialElementAtom, initialElement)
   }
 )
diff --git a/src/types/CommonTypes.ts b/src/types/CommonTypes.ts
index fd1c47b..f92f999 100644
--- a/src/types/CommonTypes.ts
+++ b/src/types/CommonTypes.ts
@@ -15,6 +15,7 @@ export interface Element {
   y2: number;
   // pointsarr: Array<number[]>;  //[[x,y], [x,y], [x,y], ...]
   points: string  //"x,y x,y x,y ..."
+  markerEnd: string;
   stroke: string;
   strokeWidth: number;
   fill: string;

From 4e1c00b1ccad26da3da19875a2a96e4b02dc0ba6 Mon Sep 17 00:00:00 2001
From: KirillSerg <kirill.sergienko1989@gmail.com>
Date: Tue, 21 May 2024 00:05:49 +0300
Subject: [PATCH 3/4] fix: cleaning of toolbar element name state

---
 src/components/Toolbar.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/Toolbar.tsx b/src/components/Toolbar.tsx
index 93ac6d6..bd1692a 100644
--- a/src/components/Toolbar.tsx
+++ b/src/components/Toolbar.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useAtom } from 'jotai';
 import { creatingElementTypeAtom, initialElementAtom } from '../store/store';
 import { Element } from '../types/CommonTypes';
@@ -15,7 +15,9 @@ const elementsType = {
 const Toolbar = () => {
   const [elementTypeName, setElementTypeName] =
     useState<keyof typeof elementsType>('free');
-  const [, setCreatingElementType] = useAtom(creatingElementTypeAtom);
+  const [creatingElementType, setCreatingElementType] = useAtom(
+    creatingElementTypeAtom,
+  );
   const [, setInitialElement] = useAtom(initialElementAtom);
 
   const handlerSetElementTypeName = (typeName: keyof typeof elementsType) => {
@@ -28,6 +30,12 @@ const Toolbar = () => {
       });
   };
 
+  useEffect(() => {
+    if (creatingElementType === 'free') {
+      setElementTypeName('free');
+    }
+  }, [creatingElementType]);
+
   return (
     <header className="h-[6%] sticky top-0 flex justify-center gap-4 border-4 border-black">
       <button

From 665e645210596b5065a5082cfe1a66bfbb874403 Mon Sep 17 00:00:00 2001
From: KirillSerg <kirill.sergienko1989@gmail.com>
Date: Tue, 21 May 2024 00:12:04 +0300
Subject: [PATCH 4/4] fix: remove unnecessary code.

---
 src/components/ArrowLine.tsx | 33 ---------------------------------
 1 file changed, 33 deletions(-)
 delete mode 100644 src/components/ArrowLine.tsx

diff --git a/src/components/ArrowLine.tsx b/src/components/ArrowLine.tsx
deleted file mode 100644
index 74bcc10..0000000
--- a/src/components/ArrowLine.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-// interface Props {
-//   element: Element;
-// }
-
-// const ArrowLine = ({ element }: Props) => {
-//   return (
-//     <>
-//       <defs>
-//         <marker
-//           id="arrow"
-//           markerWidth="5"
-//           markerHeight="5"
-//           refX="5"
-//           refY="2.5"
-//           orient="auto"
-//         >
-//           <path d="M 0 0 L 5 2.5 L 0 5" fill="none" stroke="black" />
-//         </marker>
-//       </defs>
-//       <line
-//         x1="0"
-//         y1="12"
-//         x2="24"
-//         y2="12"
-//         stroke="black"
-//         strokeWidth="2"
-//         markerEnd="url(#arrow)"
-//       />
-//     </>
-//   );
-// };
-
-// export default ArrowLine;