Feat: added section color binding

Author: Akalanka47000

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

@@ -1,10 +1,12 @@
 import { useSelector } from "react-redux";
+import { selectPolylineById } from "@/store/reducers/editor";
 import { d3Extended, rgbToHex } from "@/utils";
 import { default as ControlInput } from "../../control-input";
 import { default as SectionSelector } from "./section-selector";
 
 const PolylineSelectControls = () => {
   const selectedElementIds = useSelector((state: any) => state.editor.selectedElementIds);
+  const firstPolyline = useSelector(selectPolylineById(selectedElementIds[0]));
   const firstElement = document.getElementById(selectedElementIds[0]);
   return (
     <div className="flex flex-col gap-4 py-1">
@@ -13,21 +15,23 @@ const PolylineSelectControls = () => {
         <ControlInput
           id="polyline-stroke-input"
           label="Stroke"
-          defaultValue={rgbToHex(d3Extended.select(firstElement).style("stroke"))}
+          defaultValue={rgbToHex(d3Extended.select(firstElement)?.style("stroke"))}
           type="color"
+          disabled={!!firstPolyline.section}
           onChange={(e) => {
-            selectedElementIds.forEach((id) => {
+            selectedElementIds.forEach((id: string) => {
               d3Extended.selectById(id).style("stroke", e.target.value);
             });
           }}
         />
         <ControlInput
           id="polyline-fill-input"
           label="Fill"
-          defaultValue={rgbToHex(d3Extended.select(firstElement).style("color"))}
+          defaultValue={rgbToHex(d3Extended.select(firstElement)?.style("color"))}
           type="color"
+          disabled={!!firstPolyline.section}
           onChange={(e) => {
-            selectedElementIds.forEach((id) => {
+            selectedElementIds.forEach((id: string) => {
               d3Extended.selectById(id).style("color", e.target.value);
             });
           }}

src/components/controls/select/polyline/section-selector.tsx

@@ -48,6 +48,12 @@ const SectionSelector = ({ firstElement, selectedElementIds }) => {
                       className="flex-shrink-0 w-6 h-6 p-0 bg-white rounded-color-input"
                       onChange={(e) => onUpdateSection({ ...section, color: e.target.value })}
                     />
+                    <input
+                      defaultValue={section.stroke}
+                      type="color"
+                      className="flex-shrink-0 w-6 h-6 p-0 bg-white rounded-color-input"
+                      onChange={(e) => onUpdateSection({ ...section, stroke: e.target.value })}
+                    />
                     <Input
                       defaultValue={section.name}
                       className="h-8"
@@ -71,7 +77,7 @@ const SectionSelector = ({ firstElement, selectedElementIds }) => {
       <Select
         onValueChange={(value) => {
           selectedElementIds.forEach((id: string) =>
-            store.dispatch(updatePolyline({ id, section: value === "0" ? null : value }))
+            store.dispatch(updatePolyline({ id, section: +value === 0 ? null : value }))
           );
         }}
         defaultValue={firstElement?.getAttribute?.(dataAttributes.section) || undefined}

src/components/footer.tsx

@@ -17,7 +17,7 @@ const Footer: React.FC<ISTKProps> = ({ options: { showFooter = true } = {}, ...p
       style={styles?.root?.properties}
     >
       <span className={twMerge("text-sm", styles?.title?.className)} style={styles?.title?.properties}>
-        React Seat Toolkit{" "}
+        React Seat Toolkit
       </span>
       <AnimatedSwitcher
         show={!!selectedTool}

src/components/workspace/elements/polyline.tsx

@@ -1,25 +1,29 @@
-import { forwardRef } from "react";
+import { forwardRef, useMemo } from "react";
 import { twMerge } from "tailwind-merge";
 import { dataAttributes } from "@/constants";
-import { IPolyline } from "@/types";
+import { IPolyline, ISection } from "@/types";
 
 export interface IPolylineProps extends IPolyline {
   className?: string;
+  sections?: ISection[];
 }
 
-const Polyline: React.FC<IPolylineProps> = forwardRef(({ id, points, color, stroke, section, ...props }, ref: any) => {
-  return (
-    <polyline
-      ref={ref}
-      id={id}
-      points={points.map((p) => `${p.x},${p.y}`).join(" ")}
-      {...props}
-      style={{ color: color ?? "transparent", stroke }}
-      {...{ [dataAttributes.section]: section }}
-      className={twMerge(props.className)}
-    />
-  );
-});
+const Polyline: React.FC<IPolylineProps> = forwardRef(
+  ({ id, points, color, stroke, sections, section, ...props }, ref: any) => {
+    const sectionObject = useMemo(() => sections?.find?.((s) => s.id === section), [sections, section]);
+    return (
+      <polyline
+        ref={ref}
+        id={id}
+        points={points.map((p) => `${p.x},${p.y}`).join(" ")}
+        {...props}
+        style={{ color: sectionObject?.color ?? color ?? "transparent", stroke: sectionObject?.stroke ?? stroke }}
+        {...{ [dataAttributes.section]: section }}
+        className={twMerge(props.className)}
+      />
+    );
+  }
+);
 
 Polyline.displayName = "Polyline";
 

src/components/workspace/index.tsx

@@ -21,6 +21,7 @@ export const Workspace: React.FC<ISTKProps> = (props) => {
   const polylines = useSelector((state: any) => state.editor.polylines);
   const images = useSelector((state: any) => state.editor.images);
   const categories = useSelector((state: any) => state.editor.categories);
+  const sections = useSelector((state: any) => state.editor.sections);
   const selectedElementIds = useSelector((state: any) => state.editor.selectedElementIds);
   const selectedPolylineId = useSelector((state: any) => state.editor.selectedPolylineId);
   const selectedTool = useSelector((state: any) => state.toolbar.selectedTool);
@@ -99,7 +100,14 @@ export const Workspace: React.FC<ISTKProps> = (props) => {
             />
           ))}
           {polylines.map((e) => (
-            <Element key={e.id} type={ElementType.Polyline} points={e.points} {...elementProps(e)} />
+            <Element
+              key={e.id}
+              type={ElementType.Polyline}
+              points={e.points}
+              sections={sections}
+              section={e.section}
+              {...elementProps(e)}
+            />
           ))}
           {images.map((e) => (
             <Element

src/store/reducers/editor/index.ts

@@ -1,4 +1,4 @@
-import { Reducer, createSlice } from "@reduxjs/toolkit";
+import { Reducer, createSelector, createSlice } from "@reduxjs/toolkit";
 import { v4 as uuidv4 } from "uuid";
 import type { ISTKData } from "@/types";
 import booths from "./booths";
@@ -48,19 +48,22 @@ const initialState = {
       id: uuidv4(),
       name: "Section 1",
       color: "#000000",
+      stroke: "#000000",
       freeSeating: true,
       capacity: 100
     },
     {
       id: uuidv4(),
       name: "Section 2",
       color: "#FF0000",
+      stroke: "#FF0000",
       freeSeating: false
     },
     {
       id: uuidv4(),
       name: "Section 3",
       color: "#0000FF",
+      stroke: "#0000FF",
       freeSeating: false
     }
   ],
@@ -192,6 +195,7 @@ export const slice = createSlice({
         id: uuidv4(),
         name: `Section ${state.sections.length + 1}`,
         color: "#000000",
+        stroke: "#000000",
         freeSeating: false
       });
     },
@@ -253,4 +257,10 @@ export const {
   sync
 } = slice.actions;
 
+export const selectPolylineById = (id: string) =>
+  createSelector(
+    (state: any) => state.editor.polylines,
+    (polylines) => polylines.find((polyline) => polyline.id === id)
+  );
+
 export default slice.reducer as Reducer<typeof initialState>;

src/types/elements/polyline.ts

@@ -2,6 +2,7 @@ export interface ISection {
   id: string;
   name: string;
   color: string;
+  stroke: string;
   freeSeating: boolean;
   capacity?: number;
 }