Layers

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';
@@ -30,7 +29,6 @@ const App = () => {
       <Toolbar />
       <Canvas />
       <Inspector />
-      {/* <Layers /> */}
       <div className="w-full flex justify-end px-5">
         <Zoom />
         <HistoryControls />

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>
+  );
+};

src/components/Inspector.tsx

@@ -1,14 +1,13 @@
 import { useMemo } from 'react';
 import { useAtom, useAtomValue } from 'jotai';
-import deleteIcon from '../assets/icons/trash.svg';
 import {
   deleteElementsAtom,
   creationInitialElementAtom,
   selectedElementAtom,
   updateElementsAtom,
   isDrawingAtom,
+  setLayersAtom,
 } from '../store/store';
-import { ElementProps } from '../types/CommonTypes';
 import LineArrowProp from './inspectorElements/LineArrowProp';
 import LineProp from './inspectorElements/LineProp';
 import EdgeRoundProp from './inspectorElements/EdgeRoundProp';
@@ -19,10 +18,20 @@ 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);
   const [, updateElements] = useAtom(updateElementsAtom);
+  const [, setLayers] = useAtom(setLayersAtom);
   const selectedElement = useAtomValue(selectedElementAtom);
   const [creationInitialElement, setCreationInitialElement] = useAtom(
     creationInitialElementAtom,
@@ -234,6 +243,40 @@ 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"
+                  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>
+            </>
           </>
         </aside>
       )}

src/components/inspectorElements/LayersBtn.tsx

@@ -0,0 +1,18 @@
+interface Props {
+  className?: string;
+  Icon?: () => JSX.Element;
+  handlerClick?: () => void;
+}
+
+const LayersBtn = ({ className, Icon, handlerClick }: Props) => {
+  return (
+    <button
+      onClick={handlerClick}
+      className={`${className} active:bg-blue-300`}
+    >
+      {Icon && <Icon />}
+    </button>
+  );
+};
+
+export default LayersBtn;

src/store/store.ts

@@ -255,6 +255,8 @@ export const onDragStartAtom = atom(
         } else {
           set(selectedElementAtom, [element])
         }
+      } else {
+        set(selectedElementAtom, [element])
       }
       set(isDraggingAtom, true)
     }
@@ -465,6 +467,66 @@ export const duplicateAtom = atom(
   }
 )
 
+export const setLayersAtom = atom(
+  null,
+  (get, set, direction: string) => {
+    const selectedElement = get(selectedElementAtom)
+    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
+        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
+        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;
+
+    }
+
+  }
+)
+
 export const setHistoryAtom = atom(
   null,
   (get, set) => {