Patch: updated element visibility to improve performance

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

@@ -38,7 +38,7 @@ const Seat: React.FC<ISeatProps> = forwardRef(
       categories,
       category,
       sections,
-      status,
+      status = SeatStatus.Available,
       onClick,
       consumer,
       rotation,
@@ -113,8 +113,6 @@ const Seat: React.FC<ISeatProps> = forwardRef(
       }
     };
 
-    status ??= SeatStatus.Available;
-
     const seatProps = {
       ref,
       id,
@@ -177,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}