diff --git a/assets/ts/desktop.ts b/assets/ts/desktop.ts index 60ac542..dba830e 100644 --- a/assets/ts/desktop.ts +++ b/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]) + } +} diff --git a/assets/ts/thresholdCtl.ts b/assets/ts/thresholdCtl.ts index 086ed12..30f2a21 100644 --- a/assets/ts/thresholdCtl.ts +++ b/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 }