From 190c25ef56670cd72ce30885090bd0cc81219f8e Mon Sep 17 00:00:00 2001 From: haruyan-hopemucci Date: Tue, 20 Feb 2024 23:48:02 +0900 Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=E5=86=8D=E6=8F=8F=E7=94=BB=E6=99=82?= =?UTF-8?q?=E3=81=AB=E5=B1=A5=E6=AD=B4=E3=81=AB=E8=BF=BD=E5=8A=A0=E3=81=97?= =?UTF-8?q?=E3=81=AA=E3=81=84=E3=83=95=E3=83=A9=E3=82=B0=E3=82=92=E3=82=B0?= =?UTF-8?q?=E3=83=AD=E3=83=BC=E3=83=90=E3=83=AB=E3=81=AB=E6=8C=81=E3=81=9F?= =?UTF-8?q?=E3=81=9B=E3=82=8B(=E5=A6=A5=E5=8D=94)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/js/app.js | 95 ++++++++++++++++++++++++++++---------------------- 1 file changed, 54 insertions(+), 41 deletions(-) diff --git a/docs/js/app.js b/docs/js/app.js index 1a7fb0b..ee26049 100644 --- a/docs/js/app.js +++ b/docs/js/app.js @@ -9,41 +9,55 @@ const textPositionOffset = { bottom: [0, 120], } -const getHistoryKeys = () => { - const imgHistoryKeys = [] - for (let i = 0; i < localStorage.length; i++) { - const hkey = localStorage.key(i) - hkey.startsWith(KEY_LOCALSTORAGE_KEY_PREFIX) && imgHistoryKeys.push(hkey) +// 履歴に追加しないフラグ +var g_ignoreAddHistory = false + +$(function () { + var gPastedImage = null; + function getPastedImage() { + gPastedImage ??= document.querySelector("img#pasted-image"); + return gPastedImage } - imgHistoryKeys.sort().reverse() - return imgHistoryKeys -} -const loadHistories = () => { - const imgHistoryKeys = getHistoryKeys() - const container = document.querySelector('#history-container') - const template = document.querySelector('#history-template') - container.innerHTML = '' - imgHistoryKeys.forEach(item => { - const t = template.content.cloneNode(true) - t.id = item - t.querySelector('img').src = localStorage.getItem(item) - container.appendChild(t) - }) -} + const getHistoryKeys = () => { + const imgHistoryKeys = [] + for (let i = 0; i < localStorage.length; i++) { + const hkey = localStorage.key(i) + hkey.startsWith(KEY_LOCALSTORAGE_KEY_PREFIX) && imgHistoryKeys.push(hkey) + } + imgHistoryKeys.sort().reverse() + return imgHistoryKeys + } -const addHistory = (dataUrl) => { - const timestamp = Date.now() - localStorage.setItem(`${KEY_LOCALSTORAGE_KEY_PREFIX}${timestamp}`, dataUrl) - const imgHistoryKeys = getHistoryKeys() - while (imgHistoryKeys.length > MAX_HISTORY_NUM) { - localStorage.removeItem(imgHistoryKeys.pop()) + const loadHistories = () => { + const imgHistoryKeys = getHistoryKeys() + const container = document.querySelector('#history-container') + const template = document.querySelector('#history-template') + container.innerHTML = '' + imgHistoryKeys.forEach(item => { + const t = template.content.cloneNode(true) + t.id = item + t.querySelector('img').src = localStorage.getItem(item) + container.appendChild(t) + }) + // clickイベントを再設定 + $(".history-item").on("click", "img", (event) => { + g_ignoreAddHistory = true + getPastedImage().src = event.delegateTarget.querySelector('img').src + // redrawLgtnImage() + }) + } + + const addHistory = (dataUrl) => { + const timestamp = Date.now() + localStorage.setItem(`${KEY_LOCALSTORAGE_KEY_PREFIX}${timestamp}`, dataUrl) + const imgHistoryKeys = getHistoryKeys() + while (imgHistoryKeys.length > MAX_HISTORY_NUM) { + localStorage.removeItem(imgHistoryKeys.pop()) + } } -} -$(function () { var gCanvas = document.querySelector("canvas#output-image"); - var gPastedImage = document.querySelector("img#pasted-image"); const selectedOverlayImageValue = () => document.querySelector('input[name="chooseOverlay"]:checked').value; const getOverlayImage = () => document.querySelector(`img#img__${selectedOverlayImageValue()}`); @@ -56,18 +70,17 @@ $(function () { // ページ読み込み時に履歴を読み込む loadHistories() + // + const imgEl = document.querySelector("#pasted-image"); + imgEl.addEventListener('load', () => drawCanvas()) + $('input[name="chooseOverlay"], input[name="textPosition"]').on("change", (event) => { - if (gPastedImage.src) { + if (getPastedImage()?.src) { setMessage(`${selectedOverlayImageValue()}画像を再生成しています...`); redrawLgtnImage(); } }); - $(".history-item").on("click", "img", (event) => { - gPastedImage.src = event.delegateTarget.querySelector('img').src - redrawLgtnImage() - }) - document.addEventListener("paste", (event) => { event.preventDefault(); @@ -100,7 +113,6 @@ $(function () { const conversionResult = await heic2any({ blob: imageFile }) const dataUrl = URL.createObjectURL(conversionResult) const imgEl = document.querySelector("#pasted-image"); - imgEl.addEventListener("load", () => drawCanvas()); imgEl.src = dataUrl; } @@ -113,11 +125,10 @@ $(function () { imgEl.src = base64; }; fr.readAsDataURL(imageFile); - imgEl.onload = () => drawCanvas(); }; - const drawCanvas = function (redraw = false) { - const imgEl = gPastedImage + const drawCanvas = function () { + const imgEl = getPastedImage() const selectedImageId = selectedOverlayImageValue(); const lgtnEl = getOverlayImage() const canvas = gCanvas @@ -145,7 +156,8 @@ $(function () { context.clearRect(0, 0, canvas.width, canvas.height); context.drawImage(imgEl, drawX, drawY, drawWidth, drawHeight); // 再描画の場合は履歴に追加しない - !redraw && addHistory(canvas.toDataURL()) + !g_ignoreAddHistory && addHistory(canvas.toDataURL()) + g_ignoreAddHistory = false context.drawImage(lgtnEl, drawTextX, drawTextY, canvas.width, canvas.height); copyImageToClipboard(canvas); }; @@ -171,6 +183,7 @@ $(function () { }; const redrawLgtnImage = () => { - drawCanvas(true); + g_ignoreAddHistory = true + drawCanvas(); }; }); From a838bc72c5a758f9af98698b4de8777f73d1ccbf Mon Sep 17 00:00:00 2001 From: haruyan-hopemucci Date: Tue, 20 Feb 2024 23:48:33 +0900 Subject: [PATCH 2/2] chore: verup --- docs/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/index.html b/docs/index.html index 271788e..d129c32 100644 --- a/docs/index.html +++ b/docs/index.html @@ -27,7 +27,7 @@
-

LGTN Generator v0.6.0

+

LGTN Generator v0.6.1