Merge pull request #13 from mezh-hq/perf/large-layouts

Perf/large layouts

Author: Akalanka47000

CHANGELOG.md

@@ -1,5 +1,14 @@
 Changelog
 
+# v3.2.1 [2024-12-18]
+
+## Patch Release
+
+### Fixes 
+- Updated performance when rendering large layouts
+
+---
+
 # v3.2.0 [2024-12-07]
 
 ## Minor Release

src/components/workspace/elements/seat.tsx

@@ -6,9 +6,17 @@ import { ISeat, ISeatCategory, ISection, SeatStatus } from "@/types/elements";
 import { d3Extended } from "@/utils";
 import { getDetailedSeat } from "./utils";
 
-export const seatSize = 28;
+const seatSize = 28;
 
-export const seatLabelFontSize = seatSize / 3;
+const seatSizeHalf = seatSize / 2;
+
+const seatLabelFontSize = seatSize / 3;
+
+const seatIconXSubtract = seatSize / 2.73;
+
+const seatIconYSubtract = seatSize / 2.65;
+
+const seatIconSize = seatSize * 0.75;
 
 export interface ISeatProps extends ISeat {
   className?: string;
@@ -30,7 +38,7 @@ const Seat: React.FC<ISeatProps> = forwardRef(
       categories,
       category,
       sections,
-      status,
+      status = SeatStatus.Available,
       onClick,
       consumer,
       rotation,
@@ -105,8 +113,6 @@ const Seat: React.FC<ISeatProps> = forwardRef(
       }
     };
 
-    status ??= SeatStatus.Available;
-
     const seatProps = {
       ref,
       id,
@@ -134,24 +140,24 @@ const Seat: React.FC<ISeatProps> = forwardRef(
       <>
         {element.square ? (
           <rect
-            x={x - seatSize / 2}
-            y={y - seatSize / 2}
+            x={x - seatSizeHalf}
+            y={y - seatSizeHalf}
             height={seatSize}
             width={seatSize}
             rx={3}
             ry={3}
             {...seatProps}
           />
         ) : (
-          <circle cx={x} cy={y} r={seatSize / 2} {...seatProps} />
+          <circle cx={x} cy={y} r={seatSizeHalf} {...seatProps} />
         )}
         {SeatIcon && (
           <SeatIcon
-            x={x - seatSize / 2.73}
-            y={y - seatSize / 2.65}
-            width={seatSize * 0.75}
-            height={seatSize * 0.75}
-            size={seatSize * 0.75}
+            x={x - seatIconXSubtract}
+            y={y - seatIconYSubtract}
+            width={seatIconSize}
+            height={seatIconSize}
+            size={seatIconSize}
             className={twMerge(consumer.styles?.elements?.seat?.icon?.className, "stk-seat-icon")}
             style={consumer.styles?.elements?.seat?.icon?.properties}
           />
@@ -169,7 +175,7 @@ const Seat: React.FC<ISeatProps> = forwardRef(
             {...{ [dataAttributes.elementType]: undefined }}
             className={twMerge(props.className, "unselectable !stroke-1")}
           >
-            {label ?? "A"}
+            {label}
           </text>
         )}
       </>

src/components/workspace/elements/utils.ts

@@ -48,8 +48,7 @@ const repositionShape = (shape, dx, dy) => {
   if (resizeCursors.includes(shape.style("cursor"))) return;
   const x = +shape.attr("x") + dx;
   const y = +shape.attr("y") + dy;
-  shape.attr("x", x);
-  shape.attr("y", y);
+  shape.attr("x", x).attr("y", y);
 };
 
 const repositionPolyline = (polyline, dx, dy) => {
@@ -101,57 +100,47 @@ export const handlePolylineDrag = drag().on("drag", function (event) {
 });
 
 export const showSeat = (seat: d3.Selection<Element, {}, HTMLElement, any>) => {
-  seat.style("opacity", "1");
-  seat.style("pointer-events", "all");
-  const label = d3Extended.selectById(`${seat.attr("id")}-label`);
-  label?.style("opacity", "1");
-  label?.style("pointer-events", "all");
+  seat.style("display", "block");
+  d3Extended.selectById(`${seat.attr("id")}-label`)?.style("display", "block");
 };
 
 export const hideSeat = (seat: d3.Selection<Element, {}, HTMLElement, any>) => {
-  seat.style("opacity", "0");
-  seat.style("pointer-events", "none");
-  const label = d3Extended.selectById(`${seat.attr("id")}-label`);
-  label?.style("opacity", "0");
-  label?.style("pointer-events", "none");
+  seat.style("display", "none");
+  d3Extended.selectById(`${seat.attr("id")}-label`)?.style("display", "none");
 };
 
 export const showPreOffsetElements = () => {
   const seats = d3Extended.selectAll(`[${dataAttributes.elementType}="${ElementType.Seat}"]`);
-  if (seats.size() && +seats?.style("opacity") !== 0) {
+  if (seats.size() && seats?.style("display") !== "none") {
     const sections = d3Extended.selectAll(
       `[${dataAttributes.elementType}="${ElementType.Polyline}"][${dataAttributes.section}]`
     );
     const elementsEmbracingOffset = d3Extended.selectAll(`[${dataAttributes.embraceOffset}="true"]`);
-    seats.forEach(hideSeat);
+    setTimeout(() => seats.forEach(hideSeat), 100);
     sections.forEach((section) => {
-      section.style("opacity", 1);
-      section.style("pointer-events", "all");
+      section.style("opacity", 1).style("pointer-events", "all");
     });
     elementsEmbracingOffset.forEach((element) => {
-      element.style("opacity", 1);
-      element.style("pointer-events", "all");
+      element.style("opacity", 1).style("pointer-events", "all");
     });
   }
 };
 
 export const showPostOffsetElements = () => {
   const seats = d3Extended.selectAll(`[${dataAttributes.elementType}="${ElementType.Seat}"]`);
-  if (seats.size() && +seats.style("opacity") !== 1) {
+  if (seats.size() && seats.style("display") !== "block") {
     const sections = d3Extended.selectAll(
       `[${dataAttributes.elementType}="${ElementType.Polyline}"][${dataAttributes.section}]`
     );
     const elementsEmbracingOffset = d3Extended.selectAll(`[${dataAttributes.embraceOffset}="true"]`);
     seats.forEach(showSeat);
     sections.forEach((section) => {
       if (section.attr(dataAttributes.sectionFreeSeating) !== "true") {
-        section.style("opacity", 0);
-        section.style("pointer-events", "none");
+        section.style("opacity", 0).style("pointer-events", "none");
       }
     });
     elementsEmbracingOffset.forEach((element) => {
-      element.style("opacity", 0);
-      element.style("pointer-events", "none");
+      element.style("opacity", 0).style("pointer-events", "none");
     });
   }
 };
@@ -162,12 +151,10 @@ export const showAllElements = () => {
   const elementsEmbracingOffset = d3Extended.selectAll(`[${dataAttributes.embraceOffset}="true"]`);
   seats.forEach(showSeat);
   sections.forEach((section) => {
-    section.style("opacity", 1);
-    section.style("pointer-events", "all");
+    section.style("opacity", 1).style("pointer-events", "all");
   });
   elementsEmbracingOffset.forEach((element) => {
-    element.style("opacity", 1);
-    element.style("pointer-events", "all");
+    element.style("opacity", 1).style("pointer-events", "all");
   });
 };
 

src/components/workspace/index.tsx

@@ -58,7 +58,11 @@ export const Workspace: React.FC<ISTKProps> = (props) => {
       style={props.styles?.workspace?.root?.properties}
     >
       <svg id={ids.workspace} className="w-full h-full flex-1" onMouseOver={onWorkspaceHover}>
-        <g {...{ [dataAttributes.visibilityOffset]: "0" }} style={{ transformBox: "unset" }}>
+        <g
+          {...{ [dataAttributes.visibilityOffset]: "0" }}
+          className="will-change-transform"
+          style={{ transformBox: "unset" }}
+        >
           {images.map((e) => (
             <Element
               key={e.id}