Merge pull request #40 from KirillSerg/refact/toolbar

Refact/toolbar
KirillSerg · May 28, 2024 · 6216529 · 6216529
2 parents 27a25c5 + 3a2dd3b
commit 6216529
Show file tree

Hide file tree

Showing 11 changed files with 347 additions and 176 deletions.
diff --git a/src/components/EllipseIconBtn.tsx b/src/components/EllipseIconBtn.tsx
@@ -0,0 +1,26 @@
+import { ElementsTypeName } from '../types/CommonTypes';
+
+interface Props {
+  className: string;
+  handlerClick: (typeName: ElementsTypeName) => void;
+}
+
+const EllipseIconBtn = ({ className, handlerClick }: Props) => {
+  return (
+    <button className={`${className}`} onClick={() => handlerClick('ellipse')}>
+      <svg viewBox="0 0 24 24" height="100%" xmlns="http://www.w3.org/2000/svg">
+        <ellipse
+          cx="12"
+          cy="12"
+          rx="10"
+          ry="7"
+          stroke="black"
+          strokeWidth="2"
+          fill="none"
+        />
+      </svg>
+    </button>
+  );
+};
+
+export default EllipseIconBtn;
diff --git a/src/components/FreeIconBtn.tsx b/src/components/FreeIconBtn.tsx
@@ -0,0 +1,35 @@
+import { ElementsTypeName } from '../types/CommonTypes';
+
+interface Props {
+  className: string;
+  handlerClick: (typeName: ElementsTypeName) => void;
+}
+
+const FreeIconBtn = ({ className, handlerClick }: Props) => {
+  return (
+    <button className={`${className}`} onClick={() => handlerClick('free')}>
+      <svg
+        fill="#000000"
+        height="20.73"
+        width="20.73"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 203.079 203.079"
+      >
+        <path
+          d="M192.231,104.082V102c0-12.407-10.094-22.5-22.5-22.5c-2.802,0-5.484,0.519-7.961,1.459
+	C159.665,70.722,150.583,63,139.731,63c-2.947,0-5.76,0.575-8.341,1.61C128.667,55.162,119.624,48,109.231,48
+	c-2.798,0-5.496,0.541-8,1.516V22.5c0-12.407-10.094-22.5-22.5-22.5s-22.5,10.093-22.5,22.5v66.259
+	c-3.938-5.029-8.673-9.412-14.169-11.671c-6.133-2.52-12.587-2.219-18.667,0.872c-11.182,5.686-15.792,19.389-10.277,30.548
+	l27.95,56.563c0.79,1.552,19.731,38.008,54.023,38.008h40c31.54,0,57.199-25.794,57.199-57.506l-0.031-41.491H192.231z
+	 M135.092,188.079h-40c-24.702,0-40.091-28.738-40.646-29.796l-27.88-56.42c-1.924-3.893-0.33-8.519,3.629-10.532
+	c2.182-1.11,4.081-1.223,6.158-0.372c8.281,3.395,16.41,19.756,19.586,29.265l2.41,7.259l12.883-4.559V22.5
+	c0-4.136,3.364-7.5,7.5-7.5s7.5,3.364,7.5,7.5V109h0.136h14.864h0.136V71c0-4.187,3.748-8,7.864-8c4.262,0,8,3.505,8,7.5v15v26h15
+	v-26c0-4.136,3.364-7.5,7.5-7.5s7.5,3.364,7.5,7.5V102v16.5h15V102c0-4.136,3.364-7.5,7.5-7.5s7.5,3.364,7.5,7.5v10.727h0.035
+	l0.025,32.852C177.291,169.014,158.36,188.079,135.092,188.079z"
+        />
+      </svg>
+    </button>
+  );
+};
+
+export default FreeIconBtn;
diff --git a/src/components/Inspector.tsx b/src/components/Inspector.tsx
@@ -1,15 +1,57 @@
+import { useMemo } from 'react';
 import { useAtom } from 'jotai';
 import deleteIcon from '../assets/icons/trash.svg';
-import { deleteElementsAtom, selectedElementAtom } from '../store/store';
+import {
+  deleteElementsAtom,
+  initialElementAtom,
+  selectedElementAtom,
+  updateElementsAtom,
+} from '../store/store';
+import LineIconBtn from './LineIconBtn';
+import LineArrowIconBtn from './LineArrowIconBtn';
+import {
+  ELEMENT_TYPE_VARIANTS,
+  Element,
+  ElementsTypeName,
+} from '../types/CommonTypes';
 
 const Inspector = () => {
   const [, deleteElements] = useAtom(deleteElementsAtom);
+  const [, updateElements] = useAtom(updateElementsAtom);
   const [selectedElement] = useAtom(selectedElementAtom);
+  const [initialElement, setInitialElement] = useAtom(initialElementAtom);
+
+  const element = useMemo(() => {
+    if (selectedElement !== null) {
+      return selectedElement;
+    }
+    return initialElement;
+  }, [selectedElement, initialElement]);
+
+  const handlerSelectProperty = (typeName: ElementsTypeName) => {
+    if (selectedElement !== null) {
+      updateElements({
+        ...selectedElement,
+        type: ELEMENT_TYPE_VARIANTS[typeName] as Element['type'],
+        type_name: typeName,
+        markerEnd: typeName === 'arrow_line' ? 'url(#arrow)' : '',
+      });
+    } else {
+      setInitialElement((prev) => {
+        return {
+          ...prev,
+          type: ELEMENT_TYPE_VARIANTS[typeName] as Element['type'],
+          type_name: typeName,
+          markerEnd: typeName === 'arrow_line' ? 'url(#arrow)' : '',
+        };
+      });
+    }
+  };
 
   return (
     <aside className="fixed min-w-[10%] max-w-[25%] max-h-[80%] overflow-auto px-3 py-5  top-[10%] right-5 border border-black">
       Inspector
-      {selectedElement && (
+      {element.id && (
         <img
           onClick={deleteElements}
           src={deleteIcon}
@@ -18,6 +60,26 @@ const Inspector = () => {
           height={25}
         />
       )}
+      {element.type === 'line' ? (
+        <>
+          <LineIconBtn
+            className={`${
+              element.type_name === 'line' ? 'bg-orange-500' : 'bg-inherit'
+            } h-8 w-8 p-[6px]`}
+            handlerClick={handlerSelectProperty}
+          />
+          <LineArrowIconBtn
+            className={`${
+              element.type_name === 'arrow_line'
+                ? 'bg-orange-500'
+                : 'bg-inherit'
+            } h-8 w-8 p-[6px]`}
+            handlerClick={handlerSelectProperty}
+          />
+        </>
+      ) : (
+        ''
+      )}
     </aside>
   );
 };

diff --git a/src/components/LineArrowIconBtn.tsx b/src/components/LineArrowIconBtn.tsx
@@ -0,0 +1,41 @@
+import { ElementsTypeName } from '../types/CommonTypes';
+
+interface Props {
+  className: string;
+  handlerClick: (typeName: ElementsTypeName) => void;
+}
+
+const LineArrowIconBtn = ({ className, handlerClick }: Props) => {
+  return (
+    <button
+      className={`${className}`}
+      onClick={() => handlerClick('arrow_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"
+          markerEnd="url(#arrow)"
+        />
+      </svg>
+    </button>
+  );
+};
+
+export default LineArrowIconBtn;
diff --git a/src/components/LineIconBtn.tsx b/src/components/LineIconBtn.tsx
@@ -0,0 +1,25 @@
+import { ElementsTypeName } from '../types/CommonTypes';
+
+interface Props {
+  className: string;
+  handlerClick: (typeName: ElementsTypeName) => void;
+}
+
+const LineIconBtn = ({ className, handlerClick }: Props) => {
+  return (
+    <button className={`${className}`} onClick={() => handlerClick('line')}>
+      <svg viewBox="0 0 24 24" height="100%" xmlns="http://www.w3.org/2000/svg">
+        <line
+          x1="0"
+          y1="50%"
+          x2="100%"
+          y2="50%"
+          stroke="black"
+          strokeWidth="2"
+        />
+      </svg>
+    </button>
+  );
+};
+
+export default LineIconBtn;
diff --git a/src/components/RectIconBtn.tsx b/src/components/RectIconBtn.tsx
@@ -0,0 +1,26 @@
+import { ElementsTypeName } from '../types/CommonTypes';
+
+interface Props {
+  className: string;
+  handlerClick: (typeName: ElementsTypeName) => void;
+}
+
+const RectIconBtn = ({ className, handlerClick }: Props) => {
+  return (
+    <button className={`${className}`} onClick={() => handlerClick('rect')}>
+      <svg viewBox="0 0 24 24" height="100%" xmlns="http://www.w3.org/2000/svg">
+        <rect
+          x="2"
+          y="2"
+          width="20"
+          height="20"
+          stroke="black"
+          strokeWidth="2"
+          fill="none"
+        />
+      </svg>
+    </button>
+  );
+};
+
+export default RectIconBtn;
diff --git a/src/components/TextIconBtn.tsx b/src/components/TextIconBtn.tsx
@@ -0,0 +1,20 @@
+import { ElementsTypeName } from '../types/CommonTypes';
+
+interface Props {
+  className: string;
+  handlerClick: (typeName: ElementsTypeName) => void;
+}
+
+const TextIconBtn = ({ className, handlerClick }: Props) => {
+  return (
+    <button className={`${className}`} onClick={() => handlerClick('text')}>
+      <svg viewBox="0 0 24 24" height="100%" xmlns="http://www.w3.org/2000/svg">
+        <text y="80%" x="20%" width={24} height={24} strokeWidth="2">
+          Tt
+        </text>
+      </svg>
+    </button>
+  );
+};
+
+export default TextIconBtn;