columnGapAt prototype

Author: lee-naish

src/components/DataStructures/Array/Array1DRenderer/Array1DRenderer.module.scss

@@ -56,7 +56,40 @@
         //     z-index: 1;
         // }
 
-        .col {
+        .columnGap { // like .col but for a gap - no border
+            justify-content: center;
+            align-items: center;
+
+            text-align: center;
+            min-width: 8px;
+            width: 28px;
+            // min-height: var(--array-1d-minimum-height);
+            // background-color: var(--array-2d-row-col-bg);
+            border: none;
+            padding: 0 4px;
+            margin-right: 4px;
+
+            .value {
+                font-size: 12px;
+                color: var(--array-2d-row-col-value-color);
+            }
+            &.index {
+                background: var(--array-2d-row-col-bg-index);
+                border: none;
+                color: var(--array-2d-row-col-color-index);
+                padding: 0 4px;
+                margin-right: 5px;
+            }
+            &.variables {
+                background: var(--array-2d-row-col-bg-index);
+                border: none;
+                color: var(--array-2d-row-col-color-index);
+                vertical-align: text-top;
+                min-height: 60px;
+            }
+        }
+
+        .col { // column (within a row, ie an array element)
             justify-content: center;
             align-items: center;
 
@@ -72,7 +105,6 @@
             .value {
                 font-size: 12px;
                 color: var(--array-2d-row-col-value-color);
-
             }
 
             .variable {

src/components/DataStructures/Array/Array1DRenderer/index.js

@@ -52,6 +52,16 @@ class Array1DRenderer extends Array2DRenderer {
     this.toggleZoom(true);
 
     this.maxStackDepth = 0;
+    // XXX prototype stuff for insertion sort where we can have
+    // the array to sort then a gap then the tmp variable and do
+    // tweening for the moving of values around. Need to define
+    // setColumnGapAt here and in the controller use the last array
+    // element as tmp and set the previous element as the gap.
+    // Best change the color of the indexAfterGap also so it's the same
+    // as other variables.
+    this.columnGapAt = undefined; // set to a number for a gap in array
+    // this.columnGapAt = 10; // for testing
+    this.indexAfterGap = 'tmp';
   }
 
   // XXX "Warning: Each child in a list should have a unique "key" prop.
@@ -141,7 +151,8 @@ class Array1DRenderer extends Array2DRenderer {
                           }}
                           /* eslint-disable-next-line react/jsx-props-no-multi-spaces */
                           className={classes(
-                            styles.col,
+                            (j === this.columnGapAt ? styles.columnGap : styles.col),
+                            // styles.col,
                             col.faded && styles.faded,
                             col.selected && styles.selected,
                             col.selected1 && styles.selected1,
@@ -161,7 +172,8 @@ class Array1DRenderer extends Array2DRenderer {
                               col.style && col.style.textStyle,
                             )}
                           >
-                            {this.toString(col.value)}
+                            {(j == this.columnGapAt ? ' '
+                              : this.toString(col.value))}
                           </motion.span>
                         { (ALGOS_USING_FLOAT_BOX.includes(algo) && (
                             <div
@@ -202,7 +214,12 @@ class Array1DRenderer extends Array2DRenderer {
 
                   return (
                     <div className={classes(styles.col, styles.index)} key={i}>
-                      <span className={styles.value}>{i}</span>
+                      <span className={styles.value}>
+                        {(i-1 == this.columnGapAt ? ' '
+                          : i-1 == this.columnGapAt+1 ?  this.indexAfterGap
+                          : i
+                        )}
+                      </span>
                     </div>
                   );
                 })}