Feat: added shape color input

Author: Akalanka47000

src/components/controls/select/shape.jsx

@@ -73,10 +73,9 @@ const ShapeSelectControls = () => {
             }}
           />
         )}
-
         <ControlInput
-          id="shape-color-input"
-          label="Color"
+          id="shape-stroke-input"
+          label="Stroke"
           defaultValue={rgbToHex(d3Extended.select(firstElement).style("stroke"))}
           type="color"
           onChange={(e) => {
@@ -85,6 +84,17 @@ const ShapeSelectControls = () => {
             });
           }}
         />
+        <ControlInput
+          id="shape-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>
   );

src/components/core/switch/twin-switch.tsx

@@ -52,7 +52,7 @@ const TwinSwitch = ({ values = [], selectedValue, onChange, handleClassName, ...
       <div
         className={twMerge(
           padding,
-          "absolute flex justify-center items-center bg-blue-600 splash after:opacity-[0.2] rounded-full transition-all duration-medium",
+          "!absolute flex justify-center items-center bg-blue-600 splash after:opacity-[0.2] rounded-full transition-all duration-medium",
           handleClassName
         )}
         style={handleStyles}

src/components/workspace/elements/seat.jsx

@@ -8,26 +8,31 @@ export const seatSize = 28;
 export const seatLabelFontSize = seatSize / 3;
 
 const Seat = forwardRef(({ x, y, id, label, categories, category, status, ...props }, ref) => {
-  let textX = x - seatLabelFontSize / 3.5;
-
-  const labelLength = label?.toString()?.length ?? 0;
+  const categoryObject = useMemo(() => categories?.find?.((c) => c.id === category), [categories, category]);
 
-  if (labelLength >= 2) textX -= (seatLabelFontSize / 2.75) * (labelLength - 1);
+  const textX = useMemo(() => {
+    let value = (+ref.current?.getAttribute("cx") || x) - seatLabelFontSize / 3.5;
+    const labelLength = label?.toString()?.length ?? 0;
+    if (labelLength >= 2) value -= (seatLabelFontSize / 2.75) * (labelLength - 1);
+    return value;
+  }, [ref, label, x]);
 
-  const categoryObject = useMemo(() => categories?.find?.((c) => c.id === category), [categories, category]);
+  const textY = useMemo(() => {
+    return (+ref.current?.getAttribute("cy") || y) + seatLabelFontSize / 2.75;
+  }, [ref, label, y]);
 
   useEffect(() => {
     if (ref.current) {
       const seat = d3Extended.select(ref.current);
       const seatLabel = d3Extended.selectById(`${id}-label`);
       const status = seat.attr(dataAttributes.status);
       if (status === SeatStatus.Unavailable || status === SeatStatus.Reserved) {
-        seat.style("color", seatStatusColors[status].background, "important");
-        seatLabel?.style("stroke", seatStatusColors[status].label, "important");
+        seat.style("color", seatStatusColors[status].background);
+        seatLabel?.style("stroke", seatStatusColors[status].label);
       } else {
         if (categoryObject) {
-          seat.style("color", categoryObject.color, "important");
-          seatLabel?.style("stroke", categoryObject.textColor, "important");
+          seat.style("color", categoryObject.color);
+          seatLabel?.style("stroke", categoryObject.textColor);
         }
       }
     }
@@ -49,7 +54,7 @@ const Seat = forwardRef(({ x, y, id, label, categories, category, status, ...pro
         <text
           id={`${id}-label`}
           x={textX}
-          y={y + seatLabelFontSize / 2.75}
+          y={textY}
           fontSize={seatLabelFontSize}
           fontWeight={200}
           letterSpacing={1}

src/components/workspace/elements/shape.jsx

@@ -11,40 +11,44 @@ export const resizableRectangle = {
   height: 100
 };
 
-const Shape = forwardRef(({ x, y, id, name, width, height, rx, resizable, className, color, ...props }, ref) => {
-  if (name === "RectangleHorizontal") {
+const Shape = forwardRef(
+  ({ x, y, id, name, width, height, rx, resizable, className, stroke, color, ...props }, ref) => {
+    if (name === "RectangleHorizontal") {
+      return (
+        <rect
+          ref={ref}
+          id={id}
+          x={x}
+          y={y}
+          width={width ?? resizableRectangle.width}
+          height={height ?? resizableRectangle.height}
+          rx={rx ?? 15}
+          className={twMerge(className, resizable && "resizable")}
+          stroke={stroke}
+          style={{ color: color ?? "transparent" }}
+          {...{ [dataAttributes.shape]: "RectangleHorizontal" }}
+          {...props}
+        />
+      );
+    }
+    const Icon = lucide[name];
     return (
-      <rect
-        ref={ref}
+      <Icon
         id={id}
+        ref={ref}
         x={x}
         y={y}
-        width={width ?? resizableRectangle.width}
-        height={height ?? resizableRectangle.height}
-        rx={rx ?? 15}
-        className={twMerge(className, "fill-transparent", resizable && "resizable")}
-        stroke={color}
-        {...{ [dataAttributes.shape]: "RectangleHorizontal" }}
+        width={width ?? shapeSize}
+        height={height ?? shapeSize}
+        className={twMerge(className, "stroke-[0.75]")}
+        stroke={stroke}
+        style={{ color: color ?? "transparent" }}
+        {...{ [dataAttributes.shape]: name }}
         {...props}
       />
     );
   }
-  const Icon = lucide[name];
-  return (
-    <Icon
-      id={id}
-      ref={ref}
-      x={x}
-      y={y}
-      width={width ?? shapeSize}
-      height={height ?? shapeSize}
-      className={twMerge(className, "stroke-[0.75] fill-transparent")}
-      stroke={color}
-      {...{ [dataAttributes.shape]: name }}
-      {...props}
-    />
-  );
-});
+);
 
 Shape.displayName = "Shape";
 

src/components/workspace/index.jsx

@@ -34,7 +34,8 @@ export const Workspace = () => {
       y: elem.y,
       isSelected: selectedElementIds.includes(elem.id),
       label: elem.label,
-      color: elem.color
+      color: elem.color,
+      stroke: elem.stroke
     }),
     [selectedElementIds]
   );

src/utils/index.ts

@@ -71,6 +71,7 @@ export const getImageDimensions = async (base64File) => {
 
 export const rgbToHex = (rgb: string) => {
   if (!rgb) return "";
+  if (rgb.includes("transparent")) return "#ffffff00";
   function componentToHex(c) {
     const hex = Number(c).toString(16);
     return hex.length == 1 ? "0" + hex : hex;

tailwind.config.js

@@ -2,7 +2,6 @@ import animate from "tailwindcss-animate";
 
 /** @type {import('tailwindcss').Config} */
 export default {
-  important: true,
   darkMode: ["class"],
   content: ["./src/**/*.{js,ts,jsx,tsx,mdx,stories.js,css}"],
   theme: {