add stack update the refresh components

assets/ts/desktop.ts

@@ -5,7 +5,8 @@ import {
   delay,
   mouseToTransform,
   pushIndex,
-  type position
+  type position,
+  hideImage
 } from './utils'
 import { thresholdIndex, thresholdSensitivityArray } from './thresholdCtl'
 import { imgIndexSpanUpdate } from './indexDisp'
@@ -22,7 +23,8 @@ export let transformCache: string[] = []
 // abort controller for enter overlay event listener
 let EnterOverlayClickAbCtl = new AbortController()
 // stack depth of images array
-export const stackDepth: number = 5
+export let stackDepth: number = 5
+export let lastStackDepth: number = 5
 
 export const addEnterOverlayEL = (e: HTMLImageElement): void => {
   EnterOverlayClickAbCtl.abort()
@@ -43,6 +45,11 @@ export const addEnterOverlayEL = (e: HTMLImageElement): void => {
 // activate top image
 const activate = (index: number, mouseX: number, mouseY: number): void => {
   addEnterOverlayEL(images[index])
+  if (stackDepth !== lastStackDepth) {
+    trailingImageIndexes.push(index)
+    refreshStack()
+    lastStackDepth = stackDepth
+  }
   const indexesNum: number = pushIndex(
     index,
     trailingImageIndexes,
@@ -140,3 +147,19 @@ export const emptyTransformCache = (): void => {
 export const emptyTrailingImageIndexes = (): void => {
   trailingImageIndexes = []
 }
+
+export const setStackDepth = (newStackDepth: number): void => {
+  if (stackDepth !== newStackDepth) {
+    lastStackDepth = stackDepth
+    stackDepth = newStackDepth
+  }
+}
+
+export const refreshStack = (): void => {
+  const l: number = trailingImageIndexes.length
+  if (stackDepth < lastStackDepth && l > stackDepth) {
+    const times: number = l - stackDepth
+    for (let i = 0; i < times; i++)
+      hideImage(images[trailingImageIndexes.shift() as number])
+  }
+}

assets/ts/thresholdCtl.ts

@@ -1,4 +1,5 @@
 import { duper } from './utils'
+import { setStackDepth } from './desktop'
 
 // get threshold display element
 const thresholdDisp = document.getElementsByClassName('thid').item(0) as HTMLSpanElement
@@ -8,11 +9,17 @@ const threshold: number[] = [0, 40, 80, 120, 160, 200]
 export const thresholdSensitivityArray: number[] = [100, 40, 18, 14, 9, 5]
 export let thresholdIndex: number = 2
 
+export const stackDepthArray: number[] = [15, 8, 5, 5, 5, 5]
+
 // update inner text of threshold display element
 const thresholdUpdate = (): void => {
   thresholdDisp.innerText = duper(threshold[thresholdIndex])
 }
 
+const stackDepthUpdate = (): void => {
+  setStackDepth(stackDepthArray[thresholdIndex])
+}
+
 // threshold control initialization
 export const thresholdCtlInit = (): void => {
   thresholdUpdate()
@@ -23,6 +30,7 @@ export const thresholdCtlInit = (): void => {
       if (thresholdIndex > 0) {
         thresholdIndex--
         thresholdUpdate()
+        stackDepthUpdate()
       }
     },
     { passive: true }
@@ -35,6 +43,7 @@ export const thresholdCtlInit = (): void => {
       if (thresholdIndex < 5) {
         thresholdIndex++
         thresholdUpdate()
+        stackDepthUpdate()
       }
     },
     { passive: true }