Perf: visibility offset handler

mezh-hq · Apr 1, 2024 · b9d5c5c · b9d5c5c
1 parent e47037d
commit b9d5c5c
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 8 deletions.
diff --git a/src/components/workspace/elements/utils.ts b/src/components/workspace/elements/utils.ts
@@ -103,10 +103,10 @@ export const hideSeat = (seat: d3.Selection<Element, {}, HTMLElement, any>) => {
 
 export const showPreOffsetElements = () => {
   const seats = d3Extended.selectAll(`[${dataAttributes.elementType}="${ElementType.Seat}"]`);
-  const booths = d3Extended.selectAll(`[${dataAttributes.elementType}="${ElementType.Booth}"]`);
-  const sections = d3Extended.selectAll(`[${dataAttributes.elementType}="${ElementType.Polyline}"]`);
-  const elementsEmbracingOffset = d3Extended.selectAll(`[${dataAttributes.embraceOffset}="true"]`);
   if (+seats.style("opacity") !== 0) {
+    const booths = d3Extended.selectAll(`[${dataAttributes.elementType}="${ElementType.Booth}"]`);
+    const sections = d3Extended.selectAll(`[${dataAttributes.elementType}="${ElementType.Polyline}"]`);
+    const elementsEmbracingOffset = d3Extended.selectAll(`[${dataAttributes.embraceOffset}="true"]`);
     seats.forEach(hideSeat);
     booths.forEach((booth) => {
       booth.style("opacity", 0);
@@ -125,10 +125,10 @@ export const showPreOffsetElements = () => {
 
 export const showPostOffsetElements = () => {
   const seats = d3Extended.selectAll(`[${dataAttributes.elementType}="${ElementType.Seat}"]`);
-  const booths = d3Extended.selectAll(`[${dataAttributes.elementType}="${ElementType.Booth}"]`);
-  const sections = d3Extended.selectAll(`[${dataAttributes.elementType}="${ElementType.Polyline}"]`);
-  const elementsEmbracingOffset = d3Extended.selectAll(`[${dataAttributes.embraceOffset}="true"]`);
   if (+seats.style("opacity") !== 1) {
+    const booths = d3Extended.selectAll(`[${dataAttributes.elementType}="${ElementType.Booth}"]`);
+    const sections = d3Extended.selectAll(`[${dataAttributes.elementType}="${ElementType.Polyline}"]`);
+    const elementsEmbracingOffset = d3Extended.selectAll(`[${dataAttributes.embraceOffset}="true"]`);
     seats.forEach(showSeat);
     booths.forEach((booth) => {
       booth.style("opacity", 1);
@@ -146,3 +146,23 @@ export const showPostOffsetElements = () => {
     });
   }
 };
+
+export const showAllElements = () => {
+  const seats = d3Extended.selectAll(`[${dataAttributes.elementType}="${ElementType.Seat}"]`);
+  const booths = d3Extended.selectAll(`[${dataAttributes.elementType}="${ElementType.Booth}"]`);
+  const sections = d3Extended.selectAll(`[${dataAttributes.elementType}="${ElementType.Polyline}"]`);
+  const elementsEmbracingOffset = d3Extended.selectAll(`[${dataAttributes.embraceOffset}="true"]`);
+  seats.forEach(showSeat);
+  booths.forEach((booth) => {
+    booth.style("opacity", 1);
+    booth.style("pointer-events", "all");
+  });
+  sections.forEach((section) => {
+    section.style("opacity", 1);
+    section.style("pointer-events", "all");
+  });
+  elementsEmbracingOffset.forEach((element) => {
+    element.style("opacity", 1);
+    element.style("pointer-events", "all");
+  });
+};
diff --git a/src/components/workspace/visibility.tsx b/src/components/workspace/visibility.tsx
@@ -7,7 +7,7 @@ import { setInitialViewBoxScale, setVisibilityOffset } from "@/store/reducers/ed
 import type { ISTKProps } from "@/types";
 import { d3Extended } from "@/utils";
 import { Button } from "../core";
-import { showPostOffsetElements } from "./elements";
+import { showAllElements } from "./elements";
 
 const freeze = () =>
   store.dispatch(setInitialViewBoxScale(d3Extended.zoomTransform(document.querySelector(selectors.workspaceGroup)).k));
@@ -23,7 +23,7 @@ const setVisibility = () => {
 const unsetVisibility = () => {
   d3Extended.select(selectors.workspaceGroup).attr(dataAttributes.visibilityOffset, 0);
   store.dispatch(setVisibilityOffset(0));
-  showPostOffsetElements();
+  showAllElements();
 };
 
 const VisibilityControls = (props: ISTKProps) => {