Keep rendered filters unsorted to fix animation

h39s · Feb 14, 2023 · 5768ebb · 5768ebb
1 parent f963692
commit 5768ebb
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 45 deletions.
diff --git a/src/renderer/MainContent.tsx b/src/renderer/MainContent.tsx
@@ -1,33 +1,28 @@
-import {
-  createRef,
-  Fragment,
-  RefObject,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import { Fragment, useMemo } from 'react';
 import { MAX_NUM_FILTERS, MIN_NUM_FILTERS } from 'common/constants';
 import FrequencyBand from './components/FrequencyBand';
 import { useAquaContext } from './utils/AquaContext';
 import './styles/MainContent.scss';
 import AddSliderDivider from './components/AddSliderDivider';
-import SortWrapper from './SortWrapper';
 import Spinner from './icons/Spinner';
 
 const MainContent = () => {
-  const { filters, isLoading } = useAquaContext();
-  const wrapperRef = createRef<HTMLDivElement>();
-  const sliderRefs = useRef<Array<HTMLDivElement>>([]);
-  const dividerRefs = useRef<Array<HTMLDivElement>>([]);
+  const { filters: sortedFilters, isLoading } = useAquaContext();
+  const DIVIDER_WIDTH = 28;
+  const BAND_WIDTH = 72.94;
 
-  useEffect(() => {
-    sliderRefs.current = sliderRefs.current.slice(0, filters.length);
-    dividerRefs.current = dividerRefs.current.slice(0, filters.length + 1);
-  }, [filters]);
+  const [filters, sortIndexMap] = useMemo(() => {
+    const fixedSort = sortedFilters
+      .slice()
+      .sort((a, b) => a.id.localeCompare(b.id));
 
-  useEffect(() => {
-    sliderRefs.current?.forEach((r) => {});
-  }, [filters]);
+    const map: { [key: string]: number } = {};
+    sortedFilters.forEach((f, index) => {
+      map[f.id] = index;
+    });
+
+    return [fixedSort, map];
+  }, [sortedFilters]);
 
   return isLoading ? (
     <div className="center full row">
@@ -46,35 +41,37 @@ const MainContent = () => {
         <span className="row-label">Gain (dB)</span>
         <span className="row-label">Quality</span>
       </div>
-      <div ref={wrapperRef} className="bands row center">
+      <div className="bands row center">
         <AddSliderDivider
           sliderIndex={-1}
           isMaxSliderCount={filters.length >= MAX_NUM_FILTERS}
         />
-        {filters.map((filter, sliderIndex) => (
-          <Fragment key={`slider-${filter.id}`}>
-            <FrequencyBand
-              sliderIndex={sliderIndex}
-              filter={filter}
-              isMinSliderCount={filters.length <= MIN_NUM_FILTERS}
-              style={{
-                position: 'fixed',
-                transform: `translateX(${28 + sliderIndex * (28 + 72.47)}px)`,
-                'transition-duration': '500ms',
-              }}
-              key="Test"
-            />
-            <AddSliderDivider
-              sliderIndex={sliderIndex}
-              isMaxSliderCount={filters.length >= MAX_NUM_FILTERS}
-              style={{
-                position: 'fixed',
-                transform: `translateX(${(sliderIndex + 1) * (28 + 72.47)}px)`,
-                'transition-duration': '500ms',
-              }}
-            />
-          </Fragment>
-        ))}
+        {filters.map((filter) => {
+          const sliderIndex = sortIndexMap[filter.id];
+          return (
+            <Fragment key={`slider-${filter.id}`}>
+              <FrequencyBand
+                sliderIndex={sliderIndex}
+                filter={filter}
+                isMinSliderCount={filters.length <= MIN_NUM_FILTERS}
+                style={{
+                  transform: `translateX(${
+                    DIVIDER_WIDTH + sliderIndex * (DIVIDER_WIDTH + BAND_WIDTH)
+                  }px)`,
+                }}
+              />
+              <AddSliderDivider
+                sliderIndex={sliderIndex}
+                isMaxSliderCount={filters.length >= MAX_NUM_FILTERS}
+                style={{
+                  transform: `translateX(${
+                    (sliderIndex + 1) * (DIVIDER_WIDTH + BAND_WIDTH)
+                  }px)`,
+                }}
+              />
+            </Fragment>
+          );
+        })}
       </div>
     </div>
   );

diff --git a/src/renderer/styles/AddSliderDivider.scss b/src/renderer/styles/AddSliderDivider.scss
@@ -1,11 +1,16 @@
 @import 'color';
+@import 'constant';
 @import 'spacing';
 
 .addFilter {
   cursor: pointer;
   gap: $spacing-m;
   padding: 0 $spacing-s;
 
+  // For sorting frequency bands
+  position: absolute;
+  transition-duration: $sort-animate-duration;
+
   .divider {
     width: $spacing-xxs;
     height: calc(250px / 2 - 12px - $spacing-m);

diff --git a/src/renderer/styles/FrequencyBand.scss b/src/renderer/styles/FrequencyBand.scss
@@ -3,6 +3,10 @@
 @import 'spacing';
 
 .bandWrapper {
+  // For sorting frequency bands
+  position: absolute;
+  transition-duration: $sort-animate-duration;
+
   &:hover {
     .removeFilter {
       opacity: 1;

diff --git a/src/renderer/styles/MainContent.scss b/src/renderer/styles/MainContent.scss
@@ -42,6 +42,7 @@
     position: relative;
     justify-content: flex-start;
     padding: 0 $spacing-xxs; // add some horizontal padding so the outline isn't cut off at either end
+    height: 100%;
     width: 100%;
     overflow-x: auto;
     overflow-y: hidden;

diff --git a/src/renderer/styles/_constant.scss b/src/renderer/styles/_constant.scss
@@ -9,3 +9,6 @@ $equalizer-height: 580px;
 
 // NumberInput
 $input-height: 24px;
+
+// FrequencyBand and AddSliderDivider
+$sort-animate-duration: 500ms;