Feat!: added element rotation and remove booths

Author: Akalanka47000

README.md

@@ -68,7 +68,6 @@
 
   - **Miscallaneous**
     - Add, move around and scale background images ✓
-    - Add and move around booths ✓
     - Multiple element selection and deselection ✓
     - Bring elements to front or back ✓
 

src/components/controls/image.tsx

@@ -13,7 +13,7 @@ const onUploadClick = () => document.getElementById("image-input").click();
 
 type IImageControlProps = Pick<ISTKProps, "options" | "styles">;
 
-const ImageControls = ({ options: { maxImageSize = 1024000 } = {} }: IImageControlProps) => {
+const Controls = ({ options: { maxImageSize = 1024000 } = {} }: IImageControlProps) => {
   const [file, setFile] = useState(null);
 
   const onUpload = async (e) => {
@@ -68,4 +68,8 @@ const ImageControls = ({ options: { maxImageSize = 1024000 } = {} }: IImageContr
   );
 };
 
-export default memo(ImageControls);
+const ImageControls = memo(Controls);
+
+(ImageControls as any).name = "ImageControls";
+
+export default ImageControls;

src/components/controls/index.tsx

@@ -8,7 +8,6 @@ import { toggleControls } from "@/store/reducers/editor";
 import { ISTKProps } from "@/types";
 import { AnimatedSwitcher, IconButton } from "../core";
 import { Tool } from "../toolbar/data";
-import { ElementType } from "../workspace/elements";
 import { default as ImageControls } from "./image";
 import { default as NoControls } from "./no-controls";
 import { default as NoSelectedElement } from "./no-selection";
@@ -37,7 +36,6 @@ const Controls = ({ options, styles }: IControlProps) => {
         const firstElementType = document
           .getElementById(selectedElementIds[0])
           ?.getAttribute?.(dataAttributes.elementType);
-        if (firstElementType === ElementType.Booth) return SelectControls;
         if (selectedElementIds.length > 1) {
           const same = selectedElementIds.every((id) => {
             return document.getElementById(id)?.getAttribute?.(dataAttributes.elementType) === firstElementType;

src/components/controls/select/general.tsx

@@ -18,7 +18,12 @@ const GeneralSelectControls = () => {
           max={360}
           onChange={(e) => {
             selectedElementIds.forEach((id) => {
-              d3Extended.selectById(id).style("transform", `rotate(${e.target.value}deg)`);
+              const element = d3Extended.selectById(id);
+              if (element?.node()?.tagName === "svg") {
+                element.node().parentElement.style.transform = `rotate(${e.target.value}deg)`;
+              } else {
+                element.style("transform", `rotate(${e.target.value}deg)`);
+              }
             });
           }}
         />

src/components/controls/select/index.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useMemo } from "react";
+import { useMemo } from "react";
 import { useSelector } from "react-redux";
 import { ElementType } from "@/components/workspace/elements";
 import { dataAttributes } from "@/constants";
@@ -21,7 +21,6 @@ const SelectControls = ({ options, styles }: IControlProps) => {
     if (firstElementType === ElementType.Shape) return ShapeSelectControls;
     if (firstElementType === ElementType.Polyline) return PolylineSelectControls;
     if (firstElementType === ElementType.Image) return ImageSelectControls;
-    if (firstElementType === ElementType.Booth) return Fragment;
     return SeatSelectControls;
   }, [selectedElementIds]);
 

src/components/controls/shapes/index.tsx

@@ -12,7 +12,11 @@ const CursorShape = (Shape) => {
   const icon = (props) => (
     <Shape
       {...props}
-      className={twMerge(props.className, "fill-transparent")}
+      className={twMerge(
+        props.className,
+        "fill-transparent",
+        Shape.displayName !== RectangleHorizontal.displayName && "stroke-[0.9]"
+      )}
       size={Shape.displayName === RectangleHorizontal.displayName ? resizableRectangle.width : shapeSize}
       strokeWidth={Shape.displayName === RectangleHorizontal.displayName ? 0.25 : shapeStrokeWidth}
     />
@@ -21,7 +25,7 @@ const CursorShape = (Shape) => {
   return icon;
 };
 
-const ShapeControls = () => {
+const Controls = () => {
   const [selectedIndex, setSelectedIndex] = useState(0);
 
   const onShapeClick = useCallback((shape, i) => {
@@ -54,4 +58,8 @@ export const selectFirstShape = () =>
     store.dispatch(setCursor(CursorShape(shapeList[0])));
   });
 
-export default memo(ShapeControls, isEqual);
+const ShapeControls = memo(Controls, isEqual);
+
+(ShapeControls as any).name = "ShapeControls";
+
+export default ShapeControls;

src/components/controls/shapes/shape-list.ts

@@ -3,27 +3,31 @@ import {
   ArrowBigLeft,
   ArrowBigRight,
   ArrowBigUp,
+  Codesandbox,
   Diamond,
   Hexagon,
   Octagon,
   Pentagon,
   Play,
+  RectangleHorizontal,
   Square,
   Squircle
 } from "lucide-react";
 
 export const shapes = {
-  ArrowBigLeft: ArrowBigLeft,
-  ArrowBigRight: ArrowBigRight,
-  ArrowBigDown: ArrowBigDown,
-  ArrowBigUp: ArrowBigUp,
-  Play: Play,
-  Squircle: Squircle,
-  Pentagon: Pentagon,
-  Square: Square,
-  Hexagon: Hexagon,
-  Octagon: Octagon,
-  Diamond: Diamond
+  RectangleHorizontal,
+  Codesandbox,
+  ArrowBigLeft,
+  ArrowBigRight,
+  ArrowBigDown,
+  ArrowBigUp,
+  Play,
+  Squircle,
+  Pentagon,
+  Square,
+  Hexagon,
+  Octagon,
+  Diamond
 };
 
 export const shapeList = Object.values(shapes);

src/components/toolbar/data.tsx

@@ -1,22 +1,10 @@
-import {
-  CaseSensitive,
-  Circle,
-  Codesandbox,
-  Image,
-  MousePointer2,
-  Move,
-  PenTool,
-  Pentagon,
-  Sparkles,
-  Square
-} from "lucide-react";
+import { CaseSensitive, Circle, Image, MousePointer2, Move, PenTool, Pentagon, Sparkles, Square } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
 export enum Tool {
   Select = "Select",
   Eraser = "Eraser",
   Seat = "Seat",
-  Booth = "Booth",
   Pen = "Pen",
   Text = "Text",
   Shape = "Shapes",
@@ -57,12 +45,6 @@ export const tools = {
       }
     ]
   },
-  [Tool.Booth]: {
-    icon: Codesandbox,
-    iconCursor: (props: any) => <Codesandbox {...props} size={52} strokeWidth={1} />,
-    shortcut: "B",
-    description: "Click anywhere to place a booth"
-  },
   [Tool.Pen]: {
     icon: PenTool,
     iconCursor: (props: any) => (

src/components/workspace/elements/booth.tsx

@@ -31,7 +31,7 @@ const Image: React.FC<IImageProps> = forwardRef(
         preserveAspectRatio="none"
         style={{
           transform: `rotate(${rotation ?? 0}deg)`,
-          transformOrigin: `${x + width / 2}px ${y + height / 2}px`,
+          transformOrigin: `center`,
           ...consumer.styles?.elements?.image?.base?.properties
         }}
       />