From 28ad9cb09950d3ee93347a644506bf92a3230c5d Mon Sep 17 00:00:00 2001
From: Spedon <RealSped0n@outlook.com>
Date: Thu, 16 Mar 2023 21:42:59 +0800
Subject: [PATCH] fix lazy load placeholder display bug

---
 assets/ts/desktop.ts | 12 +++++-------
 assets/ts/overlay.ts | 12 ++++++------
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/assets/ts/desktop.ts b/assets/ts/desktop.ts
index 89baf45..06825c3 100644
--- a/assets/ts/desktop.ts
+++ b/assets/ts/desktop.ts
@@ -7,8 +7,7 @@ import {
   type position,
   createImgElement,
   calcImageIndex,
-  delay,
-  type imgElement
+  delay
 } from './utils'
 import { thresholdSensitivityArray, thresholdIndex } from './thresholdCtl'
 import { imgIndexSpanUpdate } from './indexDisp'
@@ -27,8 +26,7 @@ export const layers: HTMLDivElement[] = [
 // layers position caching
 export const layersStyleArray: string[][] = [
   ['0px', '0px', '0px', '0px', '0px'],
-  ['0px', '0px', '0px', '0px', '0px'],
-  ['', '', '', '', '']
+  ['0px', '0px', '0px', '0px', '0px']
 ]
 
 // global index for "activated"
@@ -39,10 +37,10 @@ let last: position = { x: 0, y: 0 }
 
 // activate top image
 const activate = (index: number, x: number, y: number): void => {
-  const imgElem: imgElement = createImgElement(imagesArray[index], true)
-  styleCache(x, y, imgElem.bgStyle, layersStyleArray)
+  const imgElem: HTMLImageElement = createImgElement(imagesArray[index])
+  styleCache(x, y, layersStyleArray)
   layersStyleSet(layersStyleArray, layers)
-  FIFO(imgElem.image, layers)
+  FIFO(imgElem, layers)
   last = { x, y }
 }
 
diff --git a/assets/ts/overlay.ts b/assets/ts/overlay.ts
index f60eacc..1b9480b 100644
--- a/assets/ts/overlay.ts
+++ b/assets/ts/overlay.ts
@@ -64,7 +64,7 @@ export const overlayDisable = (): void => {
 // handle close click
 async function handleCloseClick(): Promise<void> {
   overlayDisable()
-  layersStyleSet(layersStyleArray, layers, true, false)
+  layersStyleSet(layersStyleArray, layers)
   for (let i: number = 4; i >= 0; i--) {
     layers[i].dataset.status = `r${4 - i}`
   }
@@ -72,21 +72,21 @@ async function handleCloseClick(): Promise<void> {
   for (let i: number = 4; i >= 0; i--) {
     layers[i].dataset.status = 'null'
   }
-  layersStyleSet(layersStyleArray, layers, false, true)
+  layersStyleSet(layersStyleArray, layers)
   window.addEventListener('mousemove', handleOnMove)
 }
 
 const handlePrevClick = (): void => {
   globalIndexDec()
   const imgIndex = calcImageIndex(globalIndex, imagesArrayLen)
-  FIFO(createImgElement(imagesArray[imgIndex], false).image, layers)
+  FIFO(createImgElement(imagesArray[imgIndex]), layers)
   imgIndexSpanUpdate(imgIndex + 1, imagesArrayLen)
 }
 
 const handleNextClick = (): void => {
   globalIndexInc()
   const imgIndex = calcImageIndex(globalIndex, imagesArrayLen)
-  FIFO(createImgElement(imagesArray[imgIndex], false).image, layers)
+  FIFO(createImgElement(imagesArray[imgIndex]), layers)
   imgIndexSpanUpdate(imgIndex + 1, imagesArrayLen)
 }
 
@@ -148,8 +148,8 @@ export const vwRefreshInit = (): void => {
       } else {
         r.style.setProperty('--footer-height', '31px')
       }
-      // recenter image
-      center(layers[4])
+      // recenter image (only in overlay)
+      if (layers[4].dataset.status === 't0') center(layers[4])
     },
     { passive: true }
   )