From 2c195029e9080ccf26498258569a7aa27b40034d Mon Sep 17 00:00:00 2001
From: KirillSerg <kirill.sergienko1989@gmail.com>
Date: Wed, 7 Aug 2024 11:17:08 +0300
Subject: [PATCH 1/3] feat: added Layers UI

---
 src/App.tsx                                   |  2 -
 src/assets/icons/Icons.tsx                    | 46 +++++++++++++++++++
 src/components/Inspector.tsx                  | 33 ++++++++++++-
 src/components/Layers.tsx                     |  9 ----
 .../inspectorElements/LayersBtn.tsx           | 16 +++++++
 5 files changed, 93 insertions(+), 13 deletions(-)
 create mode 100644 src/assets/icons/Icons.tsx
 delete mode 100644 src/components/Layers.tsx
 create mode 100644 src/components/inspectorElements/LayersBtn.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 694ccd3..21aa41d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,6 @@
 import { useAtom, useAtomValue } from 'jotai';
 import Canvas from './components/Canvas';
 import Inspector from './components/Inspector';
-// import Layers from './components/Layers';
 import Toolbar from './components/Toolbar';
 import Zoom from './components/Zoom';
 import { isDrawingAtom, onKeyPressAtom } from './store/store';
@@ -29,7 +28,6 @@ const App = () => {
       <Toolbar />
       <Canvas />
       <Inspector />
-      {/* <Layers /> */}
       <Zoom />
     </div>
   );
diff --git a/src/assets/icons/Icons.tsx b/src/assets/icons/Icons.tsx
new file mode 100644
index 0000000..a20e512
--- /dev/null
+++ b/src/assets/icons/Icons.tsx
@@ -0,0 +1,46 @@
+export const IconLayerToBackFront = () => {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      role="img"
+      viewBox="0 0 24 24"
+      fill="none"
+      strokeWidth="2"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <g strokeWidth="1.5">
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+        <path d="M12 10l0 10"></path>
+        <path d="M12 10l4 4"></path>
+        <path d="M12 10l-4 4"></path>
+        <path d="M4 4l16 0"></path>
+      </g>
+    </svg>
+  );
+};
+
+export const IconLayerToBackwardForward = () => {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      role="img"
+      viewBox="0 0 24 24"
+      fill="none"
+      strokeWidth="2"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <g strokeWidth="1.5">
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+        <path d="M12 5l0 14"></path>
+        <path d="M16 9l-4 -4"></path>
+        <path d="M8 9l4 -4"></path>
+      </g>
+    </svg>
+  );
+};
diff --git a/src/components/Inspector.tsx b/src/components/Inspector.tsx
index eaddfaf..138a43a 100644
--- a/src/components/Inspector.tsx
+++ b/src/components/Inspector.tsx
@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
 import { useAtom, useAtomValue } from 'jotai';
-import deleteIcon from '../assets/icons/trash.svg';
 import {
   deleteElementsAtom,
   creationInitialElementAtom,
@@ -8,7 +7,6 @@ import {
   updateElementsAtom,
   isDrawingAtom,
 } from '../store/store';
-import { ElementProps } from '../types/CommonTypes';
 import LineArrowProp from './inspectorElements/LineArrowProp';
 import LineProp from './inspectorElements/LineProp';
 import EdgeRoundProp from './inspectorElements/EdgeRoundProp';
@@ -19,6 +17,15 @@ import StrokeWidthProp from './inspectorElements/StrokeWidthProp';
 import ColorsPalette from './inspectorElements/ColorsPalette';
 import StrokeStyleProp from './inspectorElements/StrokeStyleProp';
 import DuplicateProp from './inspectorElements/DuplicateProp';
+import LayersBtn from './inspectorElements/LayersBtn';
+
+import { ElementProps } from '../types/CommonTypes';
+
+import deleteIcon from '../assets/icons/trash.svg';
+import {
+  IconLayerToBackFront,
+  IconLayerToBackwardForward,
+} from '../assets/icons/Icons';
 
 const Inspector = () => {
   const [, deleteElements] = useAtom(deleteElementsAtom);
@@ -234,6 +241,28 @@ const Inspector = () => {
                 strokeLinecap="round"
               />
             </div>
+
+            <>
+              <p>Layers</p>
+              <div id="layers" className="flex flex-wrap gap-1">
+                <LayersBtn
+                  Icon={IconLayerToBackFront}
+                  className="bg-gray-200 h-8 min-w-8 p-[6px] rounded-md rotate-180"
+                />
+                <LayersBtn
+                  Icon={IconLayerToBackwardForward}
+                  className="bg-gray-200 h-8 min-w-8 p-[6px] rounded-md rotate-180"
+                />
+                <LayersBtn
+                  Icon={IconLayerToBackwardForward}
+                  className="bg-gray-200 h-8 min-w-8 p-[6px] rounded-md"
+                />
+                <LayersBtn
+                  Icon={IconLayerToBackFront}
+                  className="bg-gray-200 h-8 min-w-8 p-[6px] rounded-md"
+                />
+              </div>
+            </>
           </>
         </aside>
       )}
diff --git a/src/components/Layers.tsx b/src/components/Layers.tsx
deleted file mode 100644
index 429862f..0000000
--- a/src/components/Layers.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-const Layers = () => {
-  return (
-    <aside className="fixed min-w-[10%] max-w-[20%] max-h-[80%] overflow-auto px-3 py-5 top-[10%] left-5 border border-green-700">
-      Layers
-    </aside>
-  );
-};
-
-export default Layers;
diff --git a/src/components/inspectorElements/LayersBtn.tsx b/src/components/inspectorElements/LayersBtn.tsx
new file mode 100644
index 0000000..ffd0be4
--- /dev/null
+++ b/src/components/inspectorElements/LayersBtn.tsx
@@ -0,0 +1,16 @@
+// import { IconLayerToBackFront } from '../../assets/icons/Icons';
+
+interface Props {
+  className?: string;
+  Icon?: () => JSX.Element;
+}
+
+const LayersBtn = ({ className, Icon }: Props) => {
+  return (
+    <button className={`${className} active:bg-blue-300`}>
+      {Icon && <Icon />}
+    </button>
+  );
+};
+
+export default LayersBtn;

From 888fa7b4cc698b7cdcedd366debd15a969a68dfa Mon Sep 17 00:00:00 2001
From: KirillSerg <kirill.sergienko1989@gmail.com>
Date: Thu, 8 Aug 2024 00:41:24 +0300
Subject: [PATCH 2/3] feat: added layers logic

---
 src/components/Inspector.tsx                  | 14 +++++
 .../inspectorElements/LayersBtn.tsx           | 10 +--
 src/store/store.ts                            | 63 +++++++++++++++++++
 3 files changed, 83 insertions(+), 4 deletions(-)

diff --git a/src/components/Inspector.tsx b/src/components/Inspector.tsx
index 138a43a..6c4dc8d 100644
--- a/src/components/Inspector.tsx
+++ b/src/components/Inspector.tsx
@@ -6,6 +6,7 @@ import {
   selectedElementAtom,
   updateElementsAtom,
   isDrawingAtom,
+  setLayersAtom,
 } from '../store/store';
 import LineArrowProp from './inspectorElements/LineArrowProp';
 import LineProp from './inspectorElements/LineProp';
@@ -30,6 +31,7 @@ import {
 const Inspector = () => {
   const [, deleteElements] = useAtom(deleteElementsAtom);
   const [, updateElements] = useAtom(updateElementsAtom);
+  const [, setLayers] = useAtom(setLayersAtom);
   const selectedElement = useAtomValue(selectedElementAtom);
   const [creationInitialElement, setCreationInitialElement] = useAtom(
     creationInitialElementAtom,
@@ -248,18 +250,30 @@ const Inspector = () => {
                 <LayersBtn
                   Icon={IconLayerToBackFront}
                   className="bg-gray-200 h-8 min-w-8 p-[6px] rounded-md rotate-180"
+                  handlerClick={() => {
+                    setLayers('back');
+                  }}
                 />
                 <LayersBtn
                   Icon={IconLayerToBackwardForward}
                   className="bg-gray-200 h-8 min-w-8 p-[6px] rounded-md rotate-180"
+                  handlerClick={() => {
+                    setLayers('backward');
+                  }}
                 />
                 <LayersBtn
                   Icon={IconLayerToBackwardForward}
                   className="bg-gray-200 h-8 min-w-8 p-[6px] rounded-md"
+                  handlerClick={() => {
+                    setLayers('forward');
+                  }}
                 />
                 <LayersBtn
                   Icon={IconLayerToBackFront}
                   className="bg-gray-200 h-8 min-w-8 p-[6px] rounded-md"
+                  handlerClick={() => {
+                    setLayers('front');
+                  }}
                 />
               </div>
             </>
diff --git a/src/components/inspectorElements/LayersBtn.tsx b/src/components/inspectorElements/LayersBtn.tsx
index ffd0be4..c54505b 100644
--- a/src/components/inspectorElements/LayersBtn.tsx
+++ b/src/components/inspectorElements/LayersBtn.tsx
@@ -1,13 +1,15 @@
-// import { IconLayerToBackFront } from '../../assets/icons/Icons';
-
 interface Props {
   className?: string;
   Icon?: () => JSX.Element;
+  handlerClick?: () => void;
 }
 
-const LayersBtn = ({ className, Icon }: Props) => {
+const LayersBtn = ({ className, Icon, handlerClick }: Props) => {
   return (
-    <button className={`${className} active:bg-blue-300`}>
+    <button
+      onClick={handlerClick}
+      className={`${className} active:bg-blue-300`}
+    >
       {Icon && <Icon />}
     </button>
   );
diff --git a/src/store/store.ts b/src/store/store.ts
index d858208..fad6a8e 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -244,6 +244,8 @@ export const onDragStartAtom = atom(
         } else {
           set(selectedElementAtom, [element])
         }
+      } else {
+        set(selectedElementAtom, [element])
       }
       set(isDraggingAtom, true)
     }
@@ -450,4 +452,65 @@ export const duplicateAtom = atom(
       set(selectedElementAtom, prev => [...prev, duplicatedElemment])
     })
   }
+)
+
+export const setLayersAtom = atom(
+  null,
+  (get, set, direction: string) => {
+    const selectedElement = get(selectedElementAtom)
+    // selectedElement.forEach((el, index) => )
+    switch (direction) {
+      case "back":
+        set(elementsAtom, (prev) => {
+          const filteredArray = prev.filter((el) => !selectedElement.find((selectedEl) => selectedEl.id === el.id))
+          return [...selectedElement, ...filteredArray]
+        })
+        break;
+      case "backward":
+        // spaghetti code / crappy code / shit code
+        set(elementsAtom, (prev) => {
+          const resultArray: typeof prev = []
+          const elementsToMove: typeof prev = []
+          const indexes: number[] = []
+          prev.forEach((el, i) => {
+            // filtering and saving index & element to insert
+            if (selectedElement.find((selectedEl) => selectedEl.id === el.id && i > 0)) {
+              elementsToMove.push(el)
+              indexes.push(i)
+            } else {
+              resultArray.push(el)
+            }
+          })
+          elementsToMove.forEach((el, i) => resultArray.splice(indexes[i] - 1, 0, el))
+          return resultArray
+        })
+        break;
+      case "forward":
+        // spaghetti code / crappy code / shit code
+        set(elementsAtom, (prev) => {
+          const resultArray: typeof prev = []
+          const elementsToMove: typeof prev = []
+          const indexes: number[] = []
+          prev.forEach((el, i) => {
+            if (selectedElement.find((selectedEl) => selectedEl.id === el.id)) {
+              elementsToMove.push(el)
+              indexes.push(i)
+            } else {
+              resultArray.push(el)
+            }
+          })
+          elementsToMove.forEach((el, i) => resultArray.splice(indexes[i] + 1, 0, el))
+          return resultArray
+        })
+        break;
+      case "front":
+        set(elementsAtom, (prev) => {
+          const filteredArray = prev.filter((el) => !selectedElement.find((selectedEl) => selectedEl.id === el.id))
+          return [...filteredArray, ...selectedElement]
+        })
+        break;
+
+    }
+
+  }
 )
\ No newline at end of file

From 4ec451fdde9864092e7015accf77e25d1d4ee8a3 Mon Sep 17 00:00:00 2001
From: KirillSerg <kirill.sergienko1989@gmail.com>
Date: Thu, 8 Aug 2024 08:49:21 +0300
Subject: [PATCH 3/3] /

---
 src/store/store.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/store/store.ts b/src/store/store.ts
index fad6a8e..81df269 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -458,7 +458,6 @@ export const setLayersAtom = atom(
   null,
   (get, set, direction: string) => {
     const selectedElement = get(selectedElementAtom)
-    // selectedElement.forEach((el, index) => )
     switch (direction) {
       case "back":
         set(elementsAtom, (prev) => {
@@ -467,7 +466,7 @@ export const setLayersAtom = atom(
         })
         break;
       case "backward":
-        // spaghetti code / crappy code / shit code
+        // spaghetti code / crappy code
         set(elementsAtom, (prev) => {
           const resultArray: typeof prev = []
           const elementsToMove: typeof prev = []
@@ -486,7 +485,7 @@ export const setLayersAtom = atom(
         })
         break;
       case "forward":
-        // spaghetti code / crappy code / shit code
+        // spaghetti code / crappy code
         set(elementsAtom, (prev) => {
           const resultArray: typeof prev = []
           const elementsToMove: typeof prev = []