imgfloat/server
1
0
Fork 0
mirror of https://github.com/imgfloat/server.git synced 2026-03-22 23:10:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Reduce repaints of asset list

Browse Source
This commit is contained in:
Andreas Krühlmann
2026-02-09 16:33:25 +01:00
parent 1c6d115181
commit fe6fb68b53
2 changed files with 42 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/main/resources/static/js/admin/console.js
View File

@@ -104,6 +104,7 @@ export function createAdminConsole({
let selectedAssetId = null; let selectedAssetId = null;
let interactionState = null; let interactionState = null;
let stompClient; let stompClient;
let listNeedsRender = true;
function start() { function start() {
applyCanvasSettings(canvasSettings); applyCanvasSettings(canvasSettings);
@@ -599,6 +600,7 @@ export function createAdminConsole({
layerOrder = []; layerOrder = [];
scriptLayerOrder = []; scriptLayerOrder = [];
list.forEach((item) => storeAsset(item, { placement: "append" })); list.forEach((item) => storeAsset(item, { placement: "append" }));
markListDirty();
drawAndList(); drawAndList();
} }
@@ -623,6 +625,7 @@ export function createAdminConsole({
renderStates.set(asset.id, { ...merged }); renderStates.set(asset.id, { ...merged });
} }
updateTransformBaseline(merged); updateTransformBaseline(merged);
markListDirty();
resolvePendingUploadByName(asset.name); resolvePendingUploadByName(asset.name);
} }
@@ -682,7 +685,7 @@ export function createAdminConsole({
loopPlaybackState.delete(assetId); loopPlaybackState.delete(assetId);
cancelPendingTransform(assetId); cancelPendingTransform(assetId);
if (selectedAssetId === assetId) { if (selectedAssetId === assetId) {
selectedAssetId = null; setSelectedAssetId(null);
} }
} else if (event.patch) { } else if (event.patch) {
applyPatch(assetId, event.patch); applyPatch(assetId, event.patch);
@@ -758,13 +761,31 @@ export function createAdminConsole({
} }
} }
function drawAndList(renderList = true) { function markListDirty() {
listNeedsRender = true;
}
function markListDirty() {
listNeedsRender = true;
}
function drawAndList(renderList = false) {
requestDraw(); requestDraw();
if (renderList) { if (renderList || listNeedsRender) {
renderAssetList(); renderAssetList();
listNeedsRender = false;
} }
} }
function setSelectedAssetId(id) {
if (selectedAssetId === id) {
return false;
}
selectedAssetId = id;
markListDirty();
return true;
}
function requestDraw() { function requestDraw() {
if (drawPending) { if (drawPending) {
return; return;
@@ -1524,7 +1545,7 @@ export function createAdminConsole({
toggleBtn.title = asset.hidden ? "Show asset" : "Hide asset"; toggleBtn.title = asset.hidden ? "Show asset" : "Hide asset";
toggleBtn.addEventListener("click", (e) => { toggleBtn.addEventListener("click", (e) => {
e.stopPropagation(); e.stopPropagation();
selectedAssetId = asset.id; setSelectedAssetId(asset.id);
updateVisibility(asset, !asset.hidden); updateVisibility(asset, !asset.hidden);
}); });
actions.appendChild(toggleBtn); actions.appendChild(toggleBtn);
@@ -1535,7 +1556,7 @@ export function createAdminConsole({
row.appendChild(actions); row.appendChild(actions);
li.addEventListener("click", () => { li.addEventListener("click", () => {
selectedAssetId = asset.id; setSelectedAssetId(asset.id);
updateRenderState(asset); updateRenderState(asset);
drawAndList(); drawAndList();
}); });
@@ -1558,7 +1579,7 @@ export function createAdminConsole({
const hasPending = pendingUploads.length > 0; const hasPending = pendingUploads.length > 0;
if (!hasAssets && !hasPending) { if (!hasAssets && !hasPending) {
selectedAssetId = null; setSelectedAssetId(null);
if (assetInspector) { if (assetInspector) {
assetInspector.classList.add("hidden"); assetInspector.classList.add("hidden");
} }
@@ -2262,6 +2283,7 @@ export function createAdminConsole({
layerOrder = previousOrder; layerOrder = previousOrder;
drawAndList(); drawAndList();
}); });
markListDirty();
drawAndList(); drawAndList();
} }
@@ -2277,6 +2299,7 @@ export function createAdminConsole({
scriptLayerOrder = previousOrder; scriptLayerOrder = previousOrder;
drawAndList(); drawAndList();
}); });
markListDirty();
drawAndList(); drawAndList();
} }
@@ -2439,16 +2462,17 @@ export function createAdminConsole({
throw new Error(message); throw new Error(message);
}); });
} }
clearMedia(asset.id); clearMedia(asset.id);
assets.delete(asset.id); assets.delete(asset.id);
renderStates.delete(asset.id); renderStates.delete(asset.id);
transformBaseline.delete(asset.id); transformBaseline.delete(asset.id);
layerOrder = layerOrder.filter((id) => id !== asset.id); layerOrder = layerOrder.filter((id) => id !== asset.id);
scriptLayerOrder = scriptLayerOrder.filter((id) => id !== asset.id); scriptLayerOrder = scriptLayerOrder.filter((id) => id !== asset.id);
cancelPendingTransform(asset.id); cancelPendingTransform(asset.id);
if (selectedAssetId === asset.id) { if (selectedAssetId === asset.id) {
selectedAssetId = null; setSelectedAssetId(null);
} }
markListDirty();
drawAndList(); drawAndList();
showToast("Asset deleted.", "info"); showToast("Asset deleted.", "info");
}) })
@@ -2690,7 +2714,7 @@ export function createAdminConsole({
const hit = findAssetAtPoint(point.x, point.y); const hit = findAssetAtPoint(point.x, point.y);
if (hit) { if (hit) {
selectedAssetId = hit.id; setSelectedAssetId(hit.id);
updateRenderState(hit); updateRenderState(hit);
interactionState = { interactionState = {
mode: "move", mode: "move",
@@ -2700,7 +2724,7 @@ export function createAdminConsole({
}; };
canvas.style.cursor = "grabbing"; canvas.style.cursor = "grabbing";
} else { } else {
selectedAssetId = null; setSelectedAssetId(null);
interactionState = null; interactionState = null;
canvas.style.cursor = "default"; canvas.style.cursor = "default";
} }
@@ -2766,7 +2790,7 @@ export function createAdminConsole({
} }
storeAsset(asset); storeAsset(asset);
updateRenderState(asset); updateRenderState(asset);
selectedAssetId = asset.id; setSelectedAssetId(asset.id);
updateSelectedAssetControls(asset); updateSelectedAssetControls(asset);
drawAndList(); drawAndList();
}, },

2
src/main/resources/templates/admin.html
View File

@@ -120,7 +120,7 @@
</div> </div>
</div> </div>
<div class="property-row"> <div class="property-row">
<span class="property-label">Maintain AR</span> <span class="property-label">Maintain aspect ratio</span>
<label class="checkbox-inline toggle inline-toggle property-control"> <label class="checkbox-inline toggle inline-toggle property-control">
<input id="maintain-aspect" type="checkbox" checked /> <input id="maintain-aspect" type="checkbox" checked />
<span class="toggle-track" aria-hidden="true"> <span class="toggle-track" aria-hidden="true">