diff --git a/assets/ts/trackMouse.ts b/assets/ts/trackMouse.ts index 8ecb46d..e701199 100644 --- a/assets/ts/trackMouse.ts +++ b/assets/ts/trackMouse.ts @@ -1,5 +1,12 @@ import { overlayEnable } from './overlay' -import { posCache, FIFO, layersPosSet, center, type position } from './utils' +import { + posCache, + FIFO, + layersPosSet, + center, + type position, + createImgElement +} from './utils' import { thresholdSensitivityArray, thresholdIndex } from './thresholdCtl' import { imgIndexSpanUpdate } from './indexDisp' import { imagesArrayLen, imagesArray } from './dataFetch' @@ -26,14 +33,9 @@ let last: position = { x: 0, y: 0 } // activate top image const activate = (index: number, x: number, y: number): void => { - const img = document.createElement('img') - img.setAttribute('src', imagesArray[index].url) - img.setAttribute('alt', imagesArray[index].index) - img.setAttribute('height', imagesArray[index].imgH) - img.setAttribute('width', imagesArray[index].imgW) posCache(x, y, posArray) layersPosSet(posArray, layers) - FIFO(img, layers) + FIFO(createImgElement(imagesArray[index]), layers) // top layer5.addEventListener( 'click', diff --git a/assets/ts/utils.ts b/assets/ts/utils.ts index a9d865a..9e626f5 100644 --- a/assets/ts/utils.ts +++ b/assets/ts/utils.ts @@ -79,3 +79,12 @@ export const center = (e: HTMLDivElement): void => { e.style.top = 'calc((100% - 31px) / 2 + 31px)' } } + +export function createImgElement(input: ImageData): HTMLImageElement { + const img = document.createElement('img') + img.setAttribute('src', input.url) + img.setAttribute('alt', input.index) + img.setAttribute('height', input.imgH) + img.setAttribute('width', input.imgW) + return img +}