From 3c9055bb68aa035c200021eda29d4fe79d636502 Mon Sep 17 00:00:00 2001
From: Svornost <11434-svornost@users.noreply.gitgud.io>
Date: Mon, 16 Oct 2023 17:07:34 -0400
Subject: [PATCH] Tweaks to multi-image mechanism for AI images. 1. Remove the
old refresh-retry functionality which is no longer used. 2. If the user
clicks "replace" and there are no images stored yet, go ahead and add one
(just like left or right navigation would). 3. Permit dead images to be
deleted without throwing (whether that's because the user purged the cache or
cleared their browser data or whatever, they need to have a way to remove
them from the list). 4. Fix some linting stuff (space/tab mixing, semicolon
placement, etc). 5. Force a game update, and don't try to fix obsolete slave
data in the renderer (always do it in the update instead).
---
src/002-config/fc-version.js | 2 +-
src/art/artJS.js | 61 +++++++++++++++++-------------------
2 files changed, 30 insertions(+), 33 deletions(-)
diff --git a/src/002-config/fc-version.js b/src/002-config/fc-version.js
index 027b5b36644..8a4955f6955 100644
--- a/src/002-config/fc-version.js
+++ b/src/002-config/fc-version.js
@@ -2,5 +2,5 @@ App.Version = {
base: "0.10.7.1", // The vanilla version the mod is based off of, this should never be changed.
pmod: "4.0.0-alpha.27",
commitHash: null,
- release: 1212, // When getting close to 2000, please remove the check located within the onLoad() function defined at line five of src/js/eventHandlers.js.
+ release: 1213, // When getting close to 2000, please remove the check located within the onLoad() function defined at line five of src/js/eventHandlers.js.
};
diff --git a/src/art/artJS.js b/src/art/artJS.js
index efa2d8fc38b..c2facc591c4 100644
--- a/src/art/artJS.js
+++ b/src/art/artJS.js
@@ -541,10 +541,13 @@ App.Art.aiArtElement = function(slave, imageSize) {
replaceButton.innerText = '⟳';
replaceButton.title = 'Replace';
replaceButton.addEventListener("click", function() {
- console.log('clicked listner to replace button');
if (!container.classList.contains("refreshing")) {
- if (slave.custom.aiDisplayImageIdx === -1) return;
- updateAndRefresh(slave.custom.aiDisplayImageIdx);
+ if (slave.custom.aiImageIds.length === 0) {
+ // if there is no current image, go ahead and add a new one
+ updateAndRefresh();
+ } else {
+ updateAndRefresh(slave.custom.aiDisplayImageIdx);
+ }
}
});
toolbar.appendChild(replaceButton);
@@ -553,8 +556,8 @@ App.Art.aiArtElement = function(slave, imageSize) {
/**
* @param {HTMLDivElement} toolbar
- * @param {HTMLDivElement} container
- */
+ * @param {HTMLDivElement} container
+ */
function makeGenerationButton(toolbar, container) {
generationButton = document.createElement("button");
generationButton.innerText = '+';
@@ -570,28 +573,32 @@ App.Art.aiArtElement = function(slave, imageSize) {
async function deleteSlaveAiImage(slave, idx) {
const deletionId = slave.custom.aiImageIds[idx];
- await App.Art.GenAI.imageDB.removeImage(deletionId);
+ try {
+ await App.Art.GenAI.imageDB.removeImage(deletionId);
+ } catch (e) {
+ // it's valid to delete an image that can't be fetched (maybe the browser data is cleared or whatever)
+ }
slave.custom.aiImageIds = [...slave.custom.aiImageIds.slice(0, idx), ...slave.custom.aiImageIds.slice(idx + 1)];
if (slave.custom.aiImageIds.length === 0) {
slave.custom.aiDisplayImageIdx = -1;
} else if (slave.custom.aiDisplayImageIdx !== 0) {
slave.custom.aiDisplayImageIdx--;
}
- };
+ }
/**
* @param {HTMLDivElement} toolbar
- * @param {HTMLDivElement} container
- */
+ * @param {HTMLDivElement} container
+ */
function makeDeleteButton(toolbar, container) {
deletionButton = document.createElement("button");
deletionButton.innerText = 'â“';
deletionButton.title = 'Delete image';
deletionButton.addEventListener("click", async function() {
if (!container.classList.contains("refreshing")) {
- if (slave.custom.aiDisplayImageIdx === -1) return;
- await deleteSlaveAiImage(slave, slave.custom.aiDisplayImageIdx)
- refresh(false);
+ if (slave.custom.aiDisplayImageIdx === -1) { return; }
+ await deleteSlaveAiImage(slave, slave.custom.aiDisplayImageIdx);
+ refresh();
}
});
toolbar.appendChild(deletionButton);
@@ -610,20 +617,16 @@ App.Art.aiArtElement = function(slave, imageSize) {
makeSpinner(container);
- /** Refresh on click
- * @param {boolean} retry should we retry image generation or not?
- */
- function refresh(retry) {
+ /** Refresh on click */
+ function refresh() {
renderAIArt(slave, imageSize, slave.custom.aiDisplayImageIdx)
.then((imgElement) => {
container.querySelector('.ai-art-image')?.remove();
container.prepend(imgElement); // prepend it before the toolbar and spinner, otherwise you can't see them
}).catch((e) => {
- if (retry) {
- console.log('Error in refresh retry')
- console.log(e);
- updateAndRefresh();
- }
+ // couldn't render this image (perhaps it's been purged, or browser data cleared, or whatever)
+ // TODO: we might want to consider automatically removing the image if we can't render it, but for now the user can click Delete
+ console.log('Error in refresh:', e);
});
}
@@ -636,9 +639,6 @@ App.Art.aiArtElement = function(slave, imageSize) {
leftArrow.onclick = (e) => {
// Stop update onclick
e.stopPropagation();
- if(!slave.custom.aiImageIds) {
- slave.custom.aiImageIds = [];
- }
if (slave.custom.aiImageIds.length === 0) {
updateAndRefresh();
@@ -648,8 +648,8 @@ App.Art.aiArtElement = function(slave, imageSize) {
} else {
slave.custom.aiDisplayImageIdx = slave.custom.aiImageIds.length - 1;
}
- refresh(false);
- };
+ refresh();
+ }
};
container.appendChild(leftArrow);
@@ -660,9 +660,6 @@ App.Art.aiArtElement = function(slave, imageSize) {
rightArrow.innerText = '→';
rightArrow.onclick = (e) => {
e.stopPropagation();
- if(!slave.custom.aiImageIds) {
- slave.custom.aiImageIds = [];
- }
if (slave.custom.aiImageIds.length === 0) {
updateAndRefresh();
@@ -672,7 +669,7 @@ App.Art.aiArtElement = function(slave, imageSize) {
} else {
slave.custom.aiDisplayImageIdx = 0;
}
- refresh(false);
+ refresh();
}
};
container.appendChild(rightArrow);
@@ -685,7 +682,7 @@ App.Art.aiArtElement = function(slave, imageSize) {
container.classList.add("refreshing");
imageGenerator.updateSlave(slave, index).then(() => {
- refresh(false);
+ refresh();
}).catch(error => {
console.error(error);
}).finally(() => {
@@ -696,7 +693,7 @@ App.Art.aiArtElement = function(slave, imageSize) {
if (slave.custom.aiImageIds === null) {
updateAndRefresh();
} else {
- refresh(false);
+ refresh();
}
return container;
};
--
GitLab