Feat: added polyline color controls

Author: Akalanka47000

src/components/controls/select/index.jsx

@@ -3,6 +3,7 @@ import { useSelector } from "react-redux";
 import { ElementType } from "@/components/workspace/elements";
 import { dataAttributes } from "@/constants";
 import { default as GeneralSelectControls } from "./general";
+import { default as PolylineSelectControls } from "./polyline";
 import { default as SeatSelectControls } from "./seats";
 import { default as ShapeSelectControls } from "./shape";
 import { default as TextSelectControls } from "./text";
@@ -14,6 +15,7 @@ const SelectControls = () => {
     const firstElementType = document.getElementById(selectedElementIds[0])?.getAttribute?.(dataAttributes.elementType);
     if (firstElementType === ElementType.Text) return TextSelectControls;
     if (firstElementType === ElementType.Shape) return ShapeSelectControls;
+    if (firstElementType === ElementType.Polyline) return PolylineSelectControls;
     if (firstElementType === ElementType.Image) return Fragment;
     return SeatSelectControls;
   }, [selectedElementIds]);

src/components/controls/select/polyline.jsx

@@ -0,0 +1,40 @@
+import { useSelector } from "react-redux";
+import { d3Extended, rgbToHex } from "@/utils";
+import { default as ControlInput } from "../control-input";
+
+const PolylineSelectControls = () => {
+  const selectedElementIds = useSelector((state) => state.editor.selectedElementIds);
+
+  const firstElement = document.getElementById(selectedElementIds[0]);
+
+  return (
+    <div className="flex flex-col gap-4 py-1">
+      <div className="grid grid-cols-3 items-center gap-4">
+        <ControlInput
+          id="polyline-stroke-input"
+          label="Stroke"
+          defaultValue={rgbToHex(d3Extended.select(firstElement).style("stroke"))}
+          type="color"
+          onChange={(e) => {
+            selectedElementIds.forEach((id) => {
+              d3Extended.selectById(id).style("stroke", e.target.value);
+            });
+          }}
+        />
+        <ControlInput
+          id="polyline-fill-input"
+          label="Fill"
+          defaultValue={rgbToHex(d3Extended.select(firstElement).style("color"))}
+          type="color"
+          onChange={(e) => {
+            selectedElementIds.forEach((id) => {
+              d3Extended.selectById(id).style("color", e.target.value);
+            });
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default PolylineSelectControls;

src/components/controls/select/seats/index.tsx

@@ -48,8 +48,8 @@ const SeatSelectControls = () => {
                   textColor = category.textColor;
                 }
               }
-              seat.style("color", color, "important");
-              seatLabel?.style("stroke", textColor, "important");
+              seat.style("color", color);
+              seatLabel?.style("stroke", textColor);
             });
           }}
           className="flex justify-between gap-2 my-1"

src/components/workspace/elements/polyline.jsx

@@ -1,14 +1,15 @@
 import { forwardRef } from "react";
 import { twMerge } from "tailwind-merge";
 
-const Polyline = forwardRef(({ id, points, ...props }, ref) => {
+const Polyline = forwardRef(({ id, points, color, stroke, ...props }, ref) => {
   return (
     <polyline
       ref={ref}
       id={id}
       points={points.map((p) => `${p.x},${p.y}`).join(" ")}
       {...props}
-      className={twMerge(props.className, "fill-transparent")}
+      style={{ color: color ?? "transparent", stroke }}
+      className={twMerge(props.className)}
     />
   );
 });

src/components/workspace/elements/shape.jsx

@@ -24,8 +24,7 @@ const Shape = forwardRef(
           height={height ?? resizableRectangle.height}
           rx={rx ?? 15}
           className={twMerge(className, resizable && "resizable")}
-          stroke={stroke}
-          style={{ color: color ?? "transparent" }}
+          style={{ color: color ?? "transparent", stroke }}
           {...{ [dataAttributes.shape]: "RectangleHorizontal" }}
           {...props}
         />
@@ -41,8 +40,7 @@ const Shape = forwardRef(
         width={width ?? shapeSize}
         height={height ?? shapeSize}
         className={twMerge(className, "stroke-[0.75]")}
-        stroke={stroke}
-        style={{ color: color ?? "transparent" }}
+        style={{ color: color ?? "transparent", stroke }}
         {...{ [dataAttributes.shape]: name }}
         {...props}
       />