Patch: performance improvements

README.md

@@ -63,8 +63,8 @@ React UI library to design and render seat layouts. The library is still under a
 
   - **Sections**
 
-    - Section manager 🛠️
-    - Free seating sections 🛠️
+    - Section manager ✓
+    - Free seating sections ✓
 
   - **Miscallaneous**
     - Add, move around and scale background images ✓
@@ -76,7 +76,7 @@ React UI library to design and render seat layouts. The library is still under a
 
 - **Preview**: Preview the layout in a separate window 🛠️
 
-- **Designer mode and User mode**: Switch between designer and user mode to enable or disable customization 🛠️
+- **Designer mode and User mode**: Switch between designer and user mode to enable or disable customization ✓
 
 - **Custom styles**: Override the default styles to match your application's theme 🛠️
 

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

@@ -2,7 +2,7 @@ import { useCallback } from "react";
 import { useSelector } from "react-redux";
 import { Checkbox } from "@/components/core";
 import { store } from "@/store";
-import { selectPolylineById, updatePolyline } from "@/store/reducers/editor";
+import { selectPolylineById, updatePolylines } from "@/store/reducers/editor";
 import { d3Extended, rgbToHex } from "@/utils";
 import { default as ControlInput } from "../../control-input";
 import { default as SectionSelector } from "./section-selector";
@@ -14,9 +14,7 @@ const PolylineSelectControls = () => {
 
   const onCheckedChange = useCallback(
     (value: boolean) => {
-      selectedElementIds.forEach((id: string) => {
-        store.dispatch(updatePolyline({ id, freeSeating: value }));
-      });
+      store.dispatch(updatePolylines({ ids: selectedElementIds, data: { freeSeating: value } }));
     },
     [selectedElementIds]
   );

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

@@ -5,7 +5,7 @@ import { twMerge } from "tailwind-merge";
 import { Input, Popover, PopoverContent, PopoverTrigger } from "@/components/core";
 import { dataAttributes } from "@/constants";
 import { store } from "@/store";
-import { addSection, deleteSection, updatePolyline, updateSection } from "@/store/reducers/editor";
+import { addSection, deleteSection, updatePolylines, updateSection } from "@/store/reducers/editor";
 import { Callout, Caption, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../core";
 
 const onAddSection = () => store.dispatch(addSection(undefined));
@@ -79,9 +79,7 @@ const SectionSelector = ({ firstElement, selectedElementIds }) => {
       </div>
       <Select
         onValueChange={(value) => {
-          selectedElementIds.forEach((id: string) =>
-            store.dispatch(updatePolyline({ id, section: +value === 0 ? null : value }))
-          );
+          store.dispatch(updatePolylines({ ids: selectedElementIds, data: { section: +value === 0 ? null : value } }));
         }}
         defaultValue={firstElement?.getAttribute?.(dataAttributes.section) || undefined}
       >

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

@@ -7,7 +7,7 @@ import { twMerge } from "tailwind-merge";
 import { Input, Popover, PopoverContent, PopoverTrigger } from "@/components/core";
 import { dataAttributes } from "@/constants";
 import { store } from "@/store";
-import { addCategory, deleteCategory, updateCategory, updateSeat } from "@/store/reducers/editor";
+import { addCategory, deleteCategory, updateCategory, updateSeats } from "@/store/reducers/editor";
 import { Callout, Caption, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../core";
 
 const onAddCategory = () => store.dispatch(addCategory(undefined));
@@ -115,7 +115,7 @@ const Categorizer = ({ firstElement, selectedElementIds }) => {
       </div>
       <Select
         onValueChange={(value) => {
-          selectedElementIds.forEach((id: string) => store.dispatch(updateSeat({ id, category: value })));
+          store.dispatch(updateSeats({ ids: selectedElementIds, data: { category: value } }));
         }}
         defaultValue={firstElement?.getAttribute?.(dataAttributes.category) || undefined}
       >

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

@@ -2,7 +2,7 @@ import { useSelector } from "react-redux";
 import { Label, RadioGroup, RadioGroupItem } from "@/components/core";
 import { dataAttributes, seatStatusColors } from "@/constants";
 import { store } from "@/store";
-import { updateSeat } from "@/store/reducers/editor";
+import { updateSeats } from "@/store/reducers/editor";
 import { SeatStatus } from "@/types/elements";
 import { d3Extended } from "@/utils";
 import { default as ControlInput } from "../../control-input";
@@ -25,9 +25,7 @@ const SeatSelectControls = () => {
           label="Label"
           defaultValue={firstElementLabel?.textContent}
           onChange={(e) => {
-            selectedElementIds.forEach((id: string) => {
-              store.dispatch(updateSeat({ id, label: e.target.value }));
-            });
+            store.dispatch(updateSeats({ ids: selectedElementIds, data: { label: e.target.value } }));
           }}
         />
         <RadioGroup

src/store/reducers/editor/index.ts

@@ -135,6 +135,11 @@ export const slice = createSlice({
       const index = state.seats.findIndex((seat) => seat.id === action.payload.id);
       state.seats[index] = { ...state.seats[index], ...action.payload };
     },
+    updateSeats(state, action) {
+      state.seats = state.seats.map((seat) =>
+        action.payload.ids.includes(seat.id) ? { ...seat, ...action.payload.data } : seat
+      );
+    },
     addBooth(state, action) {
       state.booths.push(action.payload);
     },
@@ -160,6 +165,11 @@ export const slice = createSlice({
       const index = state.polylines.findIndex((polyline) => polyline.id === action.payload.id);
       state.polylines[index] = { ...state.polylines[index], ...action.payload };
     },
+    updatePolylines(state, action) {
+      state.polylines = state.polylines.map((polyline) =>
+        action.payload.ids.includes(polyline.id) ? { ...polyline, ...action.payload.data } : polyline
+      );
+    },
     deletePolyline: (state, action) => {
       state.polylines = state.polylines.filter((polyline) => polyline.id !== action.payload);
     },
@@ -235,6 +245,7 @@ export const {
   addSeat,
   deleteSeat,
   updateSeat,
+  updateSeats,
   addBooth,
   deleteBooth,
   addText,
@@ -243,6 +254,7 @@ export const {
   deleteShape,
   addPolyline,
   updatePolyline,
+  updatePolylines,
   deletePolyline,
   addPolylinePoint,
   addImage,

src/stories/configure.mdx

@@ -1,14 +1,10 @@
 import { Meta } from "@storybook/blocks";
-import { Button, Toaster, toast } from "../components";
+import { Button } from "../components";
 
 export const command = "bun install @mezh-hq/react-seat-toolkit"
 
 export const copy = () => {
   navigator.clipboard.writeText(command);
-  toast({
-    title: "Copied to clipboard",
-    description: "Run this in your terminal and make sure that the necessary peer dependencies are installed.",
-  });
 };
 
 <Meta title="Configure your project" />
@@ -18,4 +14,3 @@ export const copy = () => {
   <span className="!text-[18px] !lg:text-[22px] text-start font-semibold">Just one command away...</span>
   <Button onClick={copy} className="!text-[18px] xs:!text-[20px] md:!text-[25px] lg:!text-[28px] font-medium rounded-full p-4 px-8 sm:px-12 border bg-black text-white" >{command}</Button>
 </div>
-<Toaster/>