1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions Pages

Improve VPS delivery and simplify editor history

This commit is contained in:
Andraxion 2026-06-27 16:34:03 -04:00
parent 0074f0e10c
commit 17c64e1fbe
6 changed files with 283 additions and 595 deletions

View file

@ -1,24 +1,14 @@
/* eslint-disable @typescript-eslint/ban-ts-comment, no-empty */
/* eslint-disable @typescript-eslint/ban-ts-comment */
// @ts-nocheck
export function createHistoryController(scope) {
const documentScope = scope.documentScope || scope;
const renderScope = scope.renderScope || scope;
const historyScope = scope.historyScope || scope;
const uiScope = scope.uiScope || scope;
const sessionScope = scope.sessionScope || scope;
const MAX_HISTORY_ENTRIES = 40;
const MAX_PERSISTED_HISTORY_CHARS = 1_500_000;
const OPERATION_CHECKPOINT_INTERVAL = 12;
const MAX_HISTORY_ENTRIES = 2;
let pendingPersistTimer = 0;
function cloneValue(value) {
if (typeof structuredClone === "function") {
return structuredClone(value);
}
return value == null ? value : JSON.parse(JSON.stringify(value));
}
function clearPendingPersistTimer() {
if (!pendingPersistTimer) {
return;
@ -29,102 +19,26 @@ export function createHistoryController(scope) {
function persistHistoryState() {
clearPendingPersistTimer();
try {
const savedIndex = Math.max(0, Math.min(
scope.historyEntries.findIndex((entry) => Number(entry?.id) === Number(historyScope.lastSavedHistoryId)),
scope.historyEntries.length - 1,
));
const savedState = scope.historyEntries.length > 0
? captureHistoryStateAtIndex(savedIndex >= 0 ? savedIndex : scope.historyIndex)
: captureState();
const payload = {
mapId: String(documentScope.mapId || scope.mapId || ""),
savedStateSignature: getStateSignature(savedState),
historyEntries: historyScope.historyEntries,
historyIndex: historyScope.historyIndex,
historySelectionIndex: historyScope.historySelectionIndex,
nextHistoryId: historyScope.nextHistoryId,
lastSavedHistoryId: historyScope.lastSavedHistoryId,
};
const serialized = JSON.stringify(payload);
if (serialized.length > MAX_PERSISTED_HISTORY_CHARS) {
window.localStorage.removeItem(historyScope.historyStorageKey);
return false;
}
window.localStorage.setItem(historyScope.historyStorageKey, serialized);
return true;
} catch {}
return false;
return true;
}
function schedulePersistHistoryState() {
clearPendingPersistTimer();
pendingPersistTimer = window.setTimeout(() => {
pendingPersistTimer = 0;
persistHistoryState();
}, 120);
return true;
}
function restoreHistoryState() {
try {
const raw = window.localStorage.getItem(historyScope.historyStorageKey);
if (!raw) {
return null;
}
const parsed = JSON.parse(raw);
if (!parsed || typeof parsed !== "object") {
return null;
}
return parsed;
} catch {
return null;
}
return null;
}
function applyHistorySnapshot(snapshot) {
if (!snapshot || typeof snapshot !== "object") {
return false;
}
const snapshotMapId = String(snapshot.mapId || "").trim();
const currentMapId = String(documentScope.mapId || scope.mapId || "").trim();
if (snapshotMapId && currentMapId && snapshotMapId !== currentMapId) {
return false;
}
const entries = Array.isArray(snapshot.historyEntries) ? snapshot.historyEntries : null;
if (!entries || entries.length === 0) {
return false;
}
const savedId = Number(snapshot.lastSavedHistoryId) || 0;
const currentId = Number(snapshot.historyEntries?.[Number(snapshot.historyIndex) || 0]?.id) || 0;
if (!savedId || !currentId || savedId !== currentId) {
return false;
}
const savedStateSignature = String(snapshot.savedStateSignature || "").trim();
if (savedStateSignature) {
const currentLoadedSignature = getStateSignature(captureState());
if (savedStateSignature !== currentLoadedSignature) {
return false;
}
}
historyScope.historyEntries = entries;
historyScope.historyIndex = Math.max(0, Math.min(Number(snapshot.historyIndex) || 0, historyScope.historyEntries.length - 1));
historyScope.historySelectionIndex = Math.max(0, Math.min(Number(snapshot.historySelectionIndex) || historyScope.historyIndex, historyScope.historyEntries.length - 1));
historyScope.nextHistoryId = Math.max(1, Number(snapshot.nextHistoryId) || (historyScope.historyEntries[historyScope.historyEntries.length - 1]?.seq || 0) + 1);
historyScope.lastSavedHistoryId = Math.max(1, Number(snapshot.lastSavedHistoryId) || historyScope.historyEntries[historyScope.historyIndex]?.id || 1);
if (!restoreToHistoryIndex(historyScope.historyIndex)) {
const currentState = historyScope.historyEntries[historyScope.historyIndex] && historyScope.historyEntries[historyScope.historyIndex].state ? historyScope.historyEntries[historyScope.historyIndex].state : null;
if (currentState) {
applyState(currentState);
}
}
return true;
function applyHistorySnapshot() {
return false;
}
function captureState() {
return {
width: Number(documentScope.width) || 1,
height: Number(documentScope.height) || 1,
width: Math.max(1, Number(documentScope.width) || 1),
height: Math.max(1, Number(documentScope.height) || 1),
mapName: String(documentScope.mapName || scope.mapId || ""),
backgroundColor: documentScope.normalizeMapBackgroundColor(documentScope.backgroundColor),
backgroundTileId: String(documentScope.backgroundTileId || "").trim(),
@ -142,6 +56,35 @@ export function createHistoryController(scope) {
};
}
function cloneHistoryState(state) {
if (!state || typeof state !== "object") {
return captureState();
}
return {
width: Math.max(1, Number(state.width) || 1),
height: Math.max(1, Number(state.height) || 1),
mapName: String(state.mapName || scope.mapId || ""),
backgroundColor: documentScope.normalizeMapBackgroundColor(state.backgroundColor),
backgroundTileId: documentScope.normalizeBackgroundTileId(state.backgroundTileId),
heightBlurStep: Math.max(0, Math.min(1, Number(state.heightBlurStep ?? state.heightDetailStep) || 0.1)),
layers: documentScope.cloneLayers(Array.isArray(state.layers) ? state.layers : []),
heightLayers: documentScope.cloneHeightLayers(Array.isArray(state.heightLayers) ? state.heightLayers : []),
npcs: documentScope.cloneNpcOverlays(Array.isArray(state.npcs) ? state.npcs : []),
worldChunkBackgrounds: state && state.worldChunkBackgrounds && typeof state.worldChunkBackgrounds === "object" && !Array.isArray(state.worldChunkBackgrounds)
? { ...state.worldChunkBackgrounds }
: {},
worldBookmarks: typeof scope.applyWorldBookmarkState === "function" && Array.isArray(state?.worldBookmarks)
? state.worldBookmarks.map((entry) => ({
id: String(entry?.id || "").trim(),
label: String(entry?.label || entry?.id || "").trim(),
x: Math.floor(Number(entry?.x) || 0),
y: Math.floor(Number(entry?.y) || 0),
}))
: [],
editorUi: documentScope.cloneEditorUiState(state.editorUi || {}),
};
}
function refreshUiAfterHistoryMutation() {
documentScope.ensureBaseLayer();
sessionScope.activeLayer = documentScope.roomLayers.some((layer) => layer.layer === sessionScope.activeLayer) ? sessionScope.activeLayer : 0;
@ -185,9 +128,9 @@ export function createHistoryController(scope) {
documentScope.backgroundColor = documentScope.normalizeMapBackgroundColor(state?.backgroundColor || documentScope.backgroundColor);
documentScope.backgroundTileId = documentScope.normalizeBackgroundTileId(state?.backgroundTileId);
documentScope.heightBlurStep = Math.max(0, Math.min(1, Number(state?.heightBlurStep ?? state?.heightDetailStep) || documentScope.heightBlurStep || documentScope.heightDetailStep || 0.1));
documentScope.roomLayers = documentScope.cloneLayers(Array.isArray(state.layers) ? state.layers : []);
documentScope.heightLayers = documentScope.cloneHeightLayers(Array.isArray(state.heightLayers) ? state.heightLayers : []);
const nextNpcs = documentScope.cloneNpcOverlays(Array.isArray(state.npcs) ? state.npcs : []);
documentScope.roomLayers = documentScope.cloneLayers(Array.isArray(state?.layers) ? state.layers : []);
documentScope.heightLayers = documentScope.cloneHeightLayers(Array.isArray(state?.heightLayers) ? state.heightLayers : []);
const nextNpcs = documentScope.cloneNpcOverlays(Array.isArray(state?.npcs) ? state.npcs : []);
sessionScope.editorUiState = state && state.editorUi ? documentScope.cloneEditorUiState(state.editorUi) : { panelLayouts: {} };
if (!documentScope.getHeightLayerById(sessionScope.activeHeightLayerId)) {
sessionScope.activeHeightLayerId = String(documentScope.heightLayers[0]?.id || "").trim();
@ -202,7 +145,7 @@ export function createHistoryController(scope) {
scope.applyWorldChunkBackgroundState(state?.worldChunkBackgrounds || {});
}
if (typeof scope.applyWorldBookmarkState === "function" && scope.isWorldModeActive?.()) {
scope.applyWorldBookmarkState(state?.worldBookmarks || []);
scope.applyWorldBookmarkState(Array.isArray(state?.worldBookmarks) ? state.worldBookmarks : []);
}
if (typeof scope.rebuildVisibleWorldChunksFromDocument === "function" && typeof scope.isWorldModeActive === "function" && scope.isWorldModeActive()) {
scope.rebuildVisibleWorldChunksFromDocument();
@ -212,388 +155,25 @@ export function createHistoryController(scope) {
}
}
function ensureLayerForOperation(layerNumber) {
const normalizedLayer = Number(layerNumber) || 0;
let layerEntry = scope.roomLayers.find((layer) => Number(layer.layer) === normalizedLayer) || null;
if (layerEntry) {
return layerEntry;
}
layerEntry = {
layer: normalizedLayer,
name: undefined,
zIndex: 0,
rows: scope.normalizeRows([], normalizedLayer === 0 ? "." : " "),
instanceIds: [],
};
scope.roomLayers.push(layerEntry);
scope.roomLayers = scope.roomLayers
.slice()
.sort((left, right) => Number(left.layer) - Number(right.layer));
return scope.roomLayers.find((layer) => Number(layer.layer) === normalizedLayer) || layerEntry;
}
function setStoredTileCharAt(layerNumber, tileX, tileY, nextStoredChar) {
if (tileX < 0 || tileX >= scope.width || tileY < 0 || tileY >= scope.height) {
return false;
}
const normalizedLayer = Number(layerNumber) || 0;
const layerEntry = ensureLayerForOperation(normalizedLayer);
const fillChar = normalizedLayer === 0 ? "." : " ";
const rows = scope.normalizeRows(layerEntry.rows, fillChar);
const row = rows[tileY] || fillChar.repeat(scope.width);
const safeChar = String(nextStoredChar || fillChar).charAt(0) || fillChar;
if ((row.charAt(tileX) || fillChar) === safeChar) {
return false;
}
rows[tileY] = row.slice(0, tileX) + safeChar + row.slice(tileX + 1);
layerEntry.rows = rows;
if (typeof scope.syncWorldChunkCellFromLocalTile === "function" && typeof scope.isWorldModeActive === "function" && scope.isWorldModeActive()) {
scope.syncWorldChunkCellFromLocalTile(normalizedLayer, tileX, tileY, safeChar);
}
return true;
}
function resolveTileOperationCellCoord(cell) {
if (typeof scope.isWorldModeActive === "function" && scope.isWorldModeActive()) {
const worldX = Number(cell?.worldX);
const worldY = Number(cell?.worldY);
if (Number.isFinite(worldX) && Number.isFinite(worldY)) {
return {
x: Math.floor(worldX - (Number(scope.worldTileOffsetX) || 0)),
y: Math.floor(worldY - (Number(scope.worldTileOffsetY) || 0)),
};
}
}
return {
x: Math.floor(Number(cell?.x) || 0),
y: Math.floor(Number(cell?.y) || 0),
};
}
function applyTileCellsOperation(operation, direction) {
const isRedo = direction !== "undo";
const nextBackgroundTileId = isRedo
? operation.afterBackgroundTileId
: operation.beforeBackgroundTileId;
if (nextBackgroundTileId !== undefined) {
scope.backgroundTileId = scope.normalizeBackgroundTileId(nextBackgroundTileId);
}
const cells = Array.isArray(operation.cells) ? operation.cells : [];
cells.forEach((cell) => {
const resolvedCoord = resolveTileOperationCellCoord(cell, scope.width, scope.height);
const nextStoredChar = isRedo ? cell.afterStoredChar : cell.beforeStoredChar;
setStoredTileCharAt(cell.layer, resolvedCoord.x, resolvedCoord.y, nextStoredChar);
});
if (nextBackgroundTileId !== undefined && typeof scope.rebuildVisibleWorldChunksFromDocument === "function" && typeof scope.isWorldModeActive === "function" && scope.isWorldModeActive()) {
scope.rebuildVisibleWorldChunksFromDocument();
}
scope.invalidateTileSurface();
}
function buildNpcTargetEntries(operation, direction) {
const useAfter = direction !== "undo";
const rawEntries = Array.isArray(operation.entries) ? operation.entries : [];
return rawEntries
.map((entry) => {
const snapshot = useAfter ? entry.after : entry.before;
const targetIndex = useAfter ? entry.afterIndex : entry.beforeIndex;
if (!snapshot || typeof snapshot !== "object") {
return null;
}
const cloned = scope.cloneNpcOverlays([cloneValue(snapshot)])[0];
if (!cloned) {
return null;
}
scope.syncNpcOverlayFromRecord(cloned);
return {
npc: cloned,
index: Math.max(0, Number(targetIndex) || 0),
};
})
.filter((entry) => entry !== null)
.sort((left, right) => left.index - right.index);
}
function applyNpcEntriesOperation(operation, direction) {
const rawEntries = Array.isArray(operation.entries) ? operation.entries : [];
const touchedPositions = [];
rawEntries.forEach((entry) => {
const beforePos = entry?.before && typeof entry.before === "object" ? entry.before : null;
const afterPos = entry?.after && typeof entry.after === "object" ? entry.after : null;
if (beforePos) {
const x = Math.floor(Number(beforePos.x));
const y = Math.floor(Number(beforePos.y));
if (Number.isFinite(x) && Number.isFinite(y) && x >= 0 && y >= 0) {
touchedPositions.push({ x, y });
}
}
if (afterPos) {
const x = Math.floor(Number(afterPos.x));
const y = Math.floor(Number(afterPos.y));
if (Number.isFinite(x) && Number.isFinite(y) && x >= 0 && y >= 0) {
touchedPositions.push({ x, y });
}
}
});
const affectedIds = new Set(
rawEntries.flatMap((entry) => {
const ids = [];
const beforeId = String(entry?.before?.id || "").trim();
const afterId = String(entry?.after?.id || "").trim();
if (beforeId) {
ids.push(beforeId);
}
if (afterId) {
ids.push(afterId);
}
return ids;
}),
);
if (affectedIds.size === 0) {
return;
}
const remainingNpcs = scope.npcOverlays.filter((npc) => !affectedIds.has(String(npc.id || "").trim()));
scope.npcOverlays.length = 0;
remainingNpcs.forEach((npc) => scope.npcOverlays.push(npc));
affectedIds.forEach((npcId) => {
delete scope.npcImages[npcId];
});
const targetEntries = buildNpcTargetEntries(operation, direction);
targetEntries.forEach((entry) => {
const nextIndex = Math.max(0, Math.min(scope.npcOverlays.length, entry.index));
scope.ensureNpcImageLoaded(entry.npc);
scope.npcOverlays.splice(nextIndex, 0, entry.npc);
});
if (typeof scope.rebuildWorldChunksForLocalBounds === "function" && typeof scope.isWorldModeActive === "function" && scope.isWorldModeActive() && touchedPositions.length > 0) {
const xs = touchedPositions.map((entry) => entry.x);
const ys = touchedPositions.map((entry) => entry.y);
scope.rebuildWorldChunksForLocalBounds({
minX: Math.min(...xs),
minY: Math.min(...ys),
maxX: Math.max(...xs),
maxY: Math.max(...ys),
});
}
}
function applyOperation(operation, direction, options) {
const config = options && typeof options === "object" ? options : {};
if (!operation || typeof operation !== "object") {
return false;
}
if (operation.type === "tile_cells") {
applyTileCellsOperation(operation, direction);
} else if (operation.type === "npc_entries") {
applyNpcEntriesOperation(operation, direction);
} else {
return false;
}
if (!config.deferRefresh) {
refreshUiAfterHistoryMutation();
}
return true;
}
function cloneHistoryState(state) {
if (!state || typeof state !== "object") {
return captureState();
}
return {
width: Math.max(1, Number(state.width) || 1),
height: Math.max(1, Number(state.height) || 1),
mapName: String(state.mapName || scope.mapId || ""),
backgroundColor: documentScope.normalizeMapBackgroundColor(state.backgroundColor),
backgroundTileId: documentScope.normalizeBackgroundTileId(state.backgroundTileId),
heightBlurStep: Math.max(0, Math.min(1, Number(state.heightBlurStep ?? state.heightDetailStep) || 0.1)),
layers: documentScope.cloneLayers(Array.isArray(state.layers) ? state.layers : []),
heightLayers: documentScope.cloneHeightLayers(Array.isArray(state.heightLayers) ? state.heightLayers : []),
npcs: documentScope.cloneNpcOverlays(Array.isArray(state.npcs) ? state.npcs : []),
editorUi: documentScope.cloneEditorUiState(state.editorUi || {}),
};
}
function ensureLayerForStateOperation(state, layerNumber) {
const normalizedLayer = Number(layerNumber) || 0;
let layerEntry = state.layers.find((layer) => Number(layer.layer) === normalizedLayer) || null;
if (layerEntry) {
return layerEntry;
}
layerEntry = {
layer: normalizedLayer,
name: undefined,
zIndex: 0,
rows: scope.normalizeRows([], normalizedLayer === 0 ? "." : " "),
instanceIds: [],
};
state.layers.push(layerEntry);
state.layers = state.layers
.slice()
.sort((left, right) => Number(left.layer) - Number(right.layer));
return state.layers.find((layer) => Number(layer.layer) === normalizedLayer) || layerEntry;
}
function setStoredTileCharAtInState(state, layerNumber, tileX, tileY, nextStoredChar) {
if (tileX < 0 || tileX >= state.width || tileY < 0 || tileY >= state.height) {
return false;
}
const normalizedLayer = Number(layerNumber) || 0;
const layerEntry = ensureLayerForStateOperation(state, normalizedLayer);
const fillChar = normalizedLayer === 0 ? "." : " ";
const rows = scope.normalizeRows(layerEntry.rows, fillChar);
const row = rows[tileY] || fillChar.repeat(state.width);
const safeChar = String(nextStoredChar || fillChar).charAt(0) || fillChar;
if ((row.charAt(tileX) || fillChar) === safeChar) {
return false;
}
rows[tileY] = row.slice(0, tileX) + safeChar + row.slice(tileX + 1);
layerEntry.rows = rows;
return true;
}
function applyTileCellsOperationToState(state, operation, direction) {
const nextState = cloneHistoryState(state);
const isRedo = direction !== "undo";
const nextBackgroundTileId = isRedo
? operation.afterBackgroundTileId
: operation.beforeBackgroundTileId;
if (nextBackgroundTileId !== undefined) {
nextState.backgroundTileId = documentScope.normalizeBackgroundTileId(nextBackgroundTileId);
}
const cells = Array.isArray(operation.cells) ? operation.cells : [];
cells.forEach((cell) => {
const resolvedCoord = resolveTileOperationCellCoord(cell, nextState.width, nextState.height);
const nextStoredChar = isRedo ? cell.afterStoredChar : cell.beforeStoredChar;
setStoredTileCharAtInState(nextState, cell.layer, resolvedCoord.x, resolvedCoord.y, nextStoredChar);
});
return nextState;
}
function applyNpcEntriesOperationToState(state, operation, direction) {
const nextState = cloneHistoryState(state);
const rawEntries = Array.isArray(operation.entries) ? operation.entries : [];
const affectedIds = new Set(
rawEntries.flatMap((entry) => {
const ids = [];
const beforeId = String(entry?.before?.id || "").trim();
const afterId = String(entry?.after?.id || "").trim();
if (beforeId) {
ids.push(beforeId);
}
if (afterId) {
ids.push(afterId);
}
return ids;
}),
);
if (affectedIds.size === 0) {
return nextState;
}
const useAfter = direction !== "undo";
const remainingNpcs = nextState.npcs.filter((npc) => !affectedIds.has(String(npc.id || "").trim()));
const targetEntries = rawEntries
.map((entry) => {
const snapshot = useAfter ? entry.after : entry.before;
const targetIndex = useAfter ? entry.afterIndex : entry.beforeIndex;
if (!snapshot || typeof snapshot !== "object") {
return null;
}
const cloned = documentScope.cloneNpcOverlays([cloneValue(snapshot)])[0];
if (!cloned) {
return null;
}
documentScope.syncNpcOverlayFromRecord(cloned);
return {
npc: cloned,
index: Math.max(0, Number(targetIndex) || 0),
};
})
.filter((entry) => entry !== null)
.sort((left, right) => left.index - right.index);
nextState.npcs = remainingNpcs;
targetEntries.forEach((entry) => {
const nextIndex = Math.max(0, Math.min(nextState.npcs.length, entry.index));
nextState.npcs.splice(nextIndex, 0, entry.npc);
});
return nextState;
}
function captureHistoryStateAtIndex(targetIndex) {
const normalizedTargetIndex = Math.max(0, Math.min(Number(targetIndex) || 0, scope.historyEntries.length - 1));
const targetEntry = scope.historyEntries[normalizedTargetIndex] || null;
if (!targetEntry) {
return captureState();
}
if (targetEntry.state) {
return cloneHistoryState(targetEntry.state);
}
const snapshotIndex = findNearestSnapshotIndex(normalizedTargetIndex);
if (snapshotIndex < 0) {
return captureState();
}
let nextState = cloneHistoryState(scope.historyEntries[snapshotIndex].state);
for (let index = snapshotIndex + 1; index <= normalizedTargetIndex; index += 1) {
const entry = scope.historyEntries[index];
if (!entry) {
continue;
}
if (entry.state) {
nextState = cloneHistoryState(entry.state);
continue;
}
if (!entry.operation || typeof entry.operation !== "object") {
continue;
}
if (entry.operation.type === "tile_cells") {
nextState = applyTileCellsOperationToState(nextState, entry.operation, "redo");
} else if (entry.operation.type === "npc_entries") {
nextState = applyNpcEntriesOperationToState(nextState, entry.operation, "redo");
}
}
return nextState;
}
function findNearestSnapshotIndex(targetIndex) {
for (let index = Math.max(0, Number(targetIndex) || 0); index >= 0; index -= 1) {
if (scope.historyEntries[index] && scope.historyEntries[index].state) {
return index;
}
}
return -1;
}
function restoreToHistoryIndex(targetIndex) {
const normalizedTargetIndex = Math.max(0, Math.min(Number(targetIndex) || 0, scope.historyEntries.length - 1));
const snapshotIndex = findNearestSnapshotIndex(normalizedTargetIndex);
if (snapshotIndex < 0) {
const targetEntry = scope.historyEntries[normalizedTargetIndex] || null;
if (!targetEntry?.state) {
return false;
}
applyState(scope.historyEntries[snapshotIndex].state, { deferRefresh: true });
for (let index = snapshotIndex + 1; index <= normalizedTargetIndex; index += 1) {
const entry = scope.historyEntries[index];
if (!entry) {
continue;
}
if (entry.state) {
applyState(entry.state, { deferRefresh: true });
continue;
}
if (entry.operation) {
applyOperation(entry.operation, "redo", { deferRefresh: true });
}
}
refreshUiAfterHistoryMutation();
applyState(targetEntry.state);
return true;
}
function getStateSignature(state) {
const layerSig = scope.cloneLayers(state.layers)
.sort((a, b) => a.layer - b.layer)
const layerSig = scope.cloneLayers(Array.isArray(state?.layers) ? state.layers : [])
.sort((a, b) => Number(a.layer) - Number(b.layer))
.map((layer) => ({
layer: layer.layer,
layer: Number(layer.layer) || 0,
name: typeof layer.name === "string" ? layer.name : "",
rows: scope.normalizeRows(layer.rows, layer.layer === 0 ? "." : " "),
rows: scope.normalizeRows(layer.rows, Number(layer.layer) === 0 ? "." : " "),
}));
const heightLayerSig = scope.cloneHeightLayers(state.heightLayers)
const heightLayerSig = scope.cloneHeightLayers(Array.isArray(state?.heightLayers) ? state.heightLayers : [])
.sort((a, b) => String(a.id || "").localeCompare(String(b.id || "")))
.map((entry) => ({
id: String(entry.id || ""),
@ -603,30 +183,38 @@ export function createHistoryController(scope) {
y: Number(entry.y) || 0,
rows: Array.isArray(entry.rows) ? entry.rows.map((row) => String(row || "")) : [],
}));
const npcSig = scope.cloneNpcOverlays(state.npcs)
.sort((a, b) => a.id.localeCompare(b.id))
const npcSig = scope.cloneNpcOverlays(Array.isArray(state?.npcs) ? state.npcs : [])
.sort((a, b) => String(a.id || "").localeCompare(String(b.id || "")))
.map((entry) => ({
id: entry.id,
id: String(entry.id || ""),
layer: Number(entry.layer) || 0,
name: entry.name,
spriteId: entry.spriteId,
x: entry.x,
y: entry.y,
name: String(entry.name || ""),
spriteId: String(entry.spriteId || ""),
x: Number(entry.x) || 0,
y: Number(entry.y) || 0,
}));
return JSON.stringify({
width: Number(state.width) || 1,
height: Number(state.height) || 1,
mapName: String(state.mapName || ""),
backgroundColor: scope.normalizeMapBackgroundColor(state.backgroundColor),
backgroundTileId: scope.normalizeBackgroundTileId(state.backgroundTileId),
heightBlurStep: Math.max(0, Math.min(1, Number(state.heightBlurStep ?? state.heightDetailStep) || 0.1)),
width: Math.max(1, Number(state?.width) || 1),
height: Math.max(1, Number(state?.height) || 1),
mapName: String(state?.mapName || ""),
backgroundColor: scope.normalizeMapBackgroundColor(state?.backgroundColor),
backgroundTileId: scope.normalizeBackgroundTileId(state?.backgroundTileId),
heightBlurStep: Math.max(0, Math.min(1, Number(state?.heightBlurStep ?? state?.heightDetailStep) || 0.1)),
layerSig,
heightLayerSig,
npcSig,
worldChunkBackgrounds: state && state.worldChunkBackgrounds && typeof state.worldChunkBackgrounds === "object" && !Array.isArray(state.worldChunkBackgrounds)
? state.worldChunkBackgrounds
: {},
editorUi: scope.cloneEditorUiState(state.editorUi || {}),
worldBookmarks: Array.isArray(state?.worldBookmarks)
? state.worldBookmarks.map((entry) => ({
id: String(entry?.id || ""),
label: String(entry?.label || ""),
x: Number(entry?.x) || 0,
y: Number(entry?.y) || 0,
}))
: [],
editorUi: scope.cloneEditorUiState(state?.editorUi || {}),
});
}
@ -642,38 +230,51 @@ export function createHistoryController(scope) {
}
function renderHistoryPreview() {
const selectedEntry = scope.historyEntries[scope.historySelectionIndex] || null;
if (!selectedEntry) {
scope.historyPreviewEl.innerHTML = '<h4>Change Preview</h4><div class="history-preview-empty">Select a history entry to inspect it.</div>';
if (!scope.historyPreviewEl) {
return;
}
const selectedEntry = scope.historyEntries[scope.historySelectionIndex] || null;
if (!selectedEntry) {
scope.historyPreviewEl.innerHTML = '<h4>Undo / Redo</h4><div class="history-preview-empty">Single-step history is empty.</div>';
return;
}
const details = Array.isArray(selectedEntry.details) ? selectedEntry.details : [];
const detailHtml = details.length > 0
? "<ul>" + details.map((detail) => "<li>" + detail + "</li>").join("") + "</ul>"
: '<div class="history-preview-empty">No additional details recorded.</div>';
const currentText = scope.historySelectionIndex === scope.historyIndex ? "Current state" : "Selected step " + selectedEntry.seq;
const title = scope.historySelectionIndex === scope.historyIndex ? "Current state" : "Single undo step";
scope.historyPreviewEl.innerHTML =
"<h4>" + currentText + "</h4>" +
"<h4>" + title + "</h4>" +
'<div style="margin-bottom:6px;">' + formatHistoryLabel(selectedEntry) + "</div>" +
detailHtml +
'<button class="mini-btn" id="jumpHistoryBtn" type="button" style="margin-top:8px;">Restore To Selected</button>';
const nextJumpBtn = document.getElementById("jumpHistoryBtn");
nextJumpBtn.disabled = scope.isSaving || scope.historySelectionIndex === scope.historyIndex;
nextJumpBtn.addEventListener("click", () => {
if (scope.historySelectionIndex === scope.historyIndex) {
return;
}
scope.historyIndex = scope.historySelectionIndex;
restoreToHistoryIndex(scope.historyIndex);
refreshToolbarState();
scope.setStatus("Restored to history step " + scope.historyEntries[scope.historyIndex].seq + ".", false);
});
'<div class="history-preview-empty" style="margin-top:8px;">Only one undo / redo step is kept in memory.</div>';
}
function renderHistoryList() {
scope.historyListEl.innerHTML = "";
if (scope.historyListEl) {
scope.historyListEl.innerHTML = "";
scope.historyEntries.forEach((entry, index) => {
if (index === scope.historyIndex) {
return;
}
const row = document.createElement("button");
row.type = "button";
row.className = "history-row" + (index === scope.historySelectionIndex ? " active" : "");
const timeText = new Date(entry.createdAt).toLocaleTimeString();
row.innerHTML =
"<span>" + String(entry.seq) + ". " + formatHistoryLabel(entry) + "</span>" +
'<span class="history-meta">' + timeText + "</span>";
row.addEventListener("click", () => {
if (index === scope.historySelectionIndex) {
return;
}
scope.historySelectionIndex = index;
renderHistoryList();
renderHistoryPreview();
});
scope.historyListEl.appendChild(row);
});
}
if (scope.historyCurrentEl) {
const currentEntry = scope.historyEntries[scope.historyIndex] || null;
scope.historyCurrentEl.innerHTML = currentEntry
@ -686,34 +287,13 @@ export function createHistoryController(scope) {
)
: '<div class="history-current-label">Current State</div><div class="history-current-empty">No history yet.</div>';
}
scope.historyEntries.forEach((entry, index) => {
if (index === scope.historyIndex) {
return;
}
const row = document.createElement("button");
row.type = "button";
row.className = "history-row" + (index === scope.historySelectionIndex ? " active" : "");
const timeText = new Date(entry.createdAt).toLocaleTimeString();
row.innerHTML =
"<span>" + String(entry.seq) + ". " + formatHistoryLabel(entry) + "</span>" +
'<span class="history-meta">' + timeText + "</span>";
row.addEventListener("click", () => {
if (index === scope.historySelectionIndex) {
return;
}
scope.historySelectionIndex = index;
renderHistoryList();
renderHistoryPreview();
});
scope.historyListEl.appendChild(row);
});
}
function refreshToolbarState(preserveCurrentStatus) {
const canUndo = scope.historyIndex > 0;
const canRedo = scope.historyIndex < scope.historyEntries.length - 1;
const currentHistoryId = scope.historyEntries[scope.historyIndex] ? scope.historyEntries[scope.historyIndex].id : 0;
const isDirtyFromSaved = currentHistoryId !== scope.lastSavedHistoryId;
const currentHistoryId = scope.historyEntries[scope.historyIndex] ? Number(scope.historyEntries[scope.historyIndex].id) || 0 : 0;
const isDirtyFromSaved = currentHistoryId !== (Number(scope.lastSavedHistoryId) || 0);
scope.undoBtn.disabled = scope.isSaving || !canUndo;
scope.redoBtn.disabled = scope.isSaving || !canRedo;
@ -725,13 +305,12 @@ export function createHistoryController(scope) {
if (preserveCurrentStatus) {
return;
}
if (scope.isSaving) {
scope.setStatus("Saving...", false);
} else if (canRedo) {
scope.setStatus("History branch active. New edits will replace future steps.", false);
scope.setStatus("Redo is available. A new edit will replace it.", false);
} else if (isDirtyFromSaved) {
scope.setStatus("Unsaved history changes.", false);
scope.setStatus("Unsaved changes.", false);
} else {
scope.setStatus("All changes saved.", false);
}
@ -739,20 +318,10 @@ export function createHistoryController(scope) {
function registerHistory(label, before, after, details, options) {
const config = options && typeof options === "object" ? options : {};
const operation = config.operation ? cloneValue(config.operation) : null;
if (operation && operation.type === "tile_cells" && (!Array.isArray(operation.cells) || operation.cells.length === 0)) {
return;
}
if (operation && operation.type === "npc_entries" && (!Array.isArray(operation.entries) || operation.entries.length === 0)) {
return;
}
const shouldStoreOperationOnly = Boolean(operation);
const nextState = shouldStoreOperationOnly ? null : (config.nextState || captureState());
const nextState = cloneHistoryState(config.nextState || captureState());
const currentEntry = scope.historyEntries[scope.historyIndex] || null;
const currentState = currentEntry && currentEntry.state
? currentEntry.state
: captureHistoryStateAtIndex(scope.historyIndex);
if (!config.skipStateCheck && nextState && currentState && getStateSignature(nextState) === getStateSignature(currentState)) {
const currentState = currentEntry?.state ? cloneHistoryState(currentEntry.state) : captureState();
if (!config.skipStateCheck && getStateSignature(nextState) === getStateSignature(currentState)) {
return;
}
@ -760,25 +329,6 @@ export function createHistoryController(scope) {
scope.historyEntries = scope.historyEntries.slice(0, scope.historyIndex + 1);
}
let operationEntriesSinceSnapshot = 0;
if (shouldStoreOperationOnly) {
for (let index = scope.historyEntries.length - 1; index >= 0; index -= 1) {
const entry = scope.historyEntries[index];
if (!entry) {
continue;
}
if (entry.state) {
break;
}
if (entry.operation) {
operationEntriesSinceSnapshot += 1;
}
}
}
const checkpointState = shouldStoreOperationOnly && operationEntriesSinceSnapshot + 1 >= OPERATION_CHECKPOINT_INTERVAL
? captureState()
: null;
const entry = {
id: scope.nextHistoryId,
seq: scope.nextHistoryId,
@ -787,47 +337,47 @@ export function createHistoryController(scope) {
before,
after,
details: Array.isArray(details) ? details : [],
state: nextState || checkpointState,
operation,
state: nextState,
};
scope.nextHistoryId += 1;
scope.historyEntries.push(entry);
if (scope.historyEntries.length > MAX_HISTORY_ENTRIES) {
scope.historyEntries = scope.historyEntries.slice(scope.historyEntries.length - MAX_HISTORY_ENTRIES);
}
scope.historyIndex = scope.historyEntries.length - 1;
scope.historySelectionIndex = scope.historyIndex;
if (scope.historyEntries.length > MAX_HISTORY_ENTRIES) {
const trimmedCount = scope.historyEntries.length - MAX_HISTORY_ENTRIES;
scope.historyEntries = scope.historyEntries.slice(trimmedCount);
scope.historyIndex = Math.max(0, scope.historyIndex - trimmedCount);
scope.historySelectionIndex = Math.max(0, scope.historySelectionIndex - trimmedCount);
}
schedulePersistHistoryState();
refreshToolbarState();
}
function undo() {
if (scope.historyIndex <= 0) {
return;
return false;
}
scope.historyIndex -= 1;
scope.historySelectionIndex = scope.historyIndex;
restoreToHistoryIndex(scope.historyIndex);
const restored = restoreToHistoryIndex(scope.historyIndex);
schedulePersistHistoryState();
refreshToolbarState();
scope.setStatus("Undo to step " + scope.historyEntries[scope.historyIndex].seq + ".", false);
if (restored) {
scope.setStatus("Undid the last change.", false);
}
return restored;
}
function redo() {
if (scope.historyIndex >= scope.historyEntries.length - 1) {
return;
return false;
}
scope.historyIndex += 1;
scope.historySelectionIndex = scope.historyIndex;
restoreToHistoryIndex(scope.historyIndex);
const restored = restoreToHistoryIndex(scope.historyIndex);
schedulePersistHistoryState();
refreshToolbarState();
scope.setStatus("Redo to step " + scope.historyEntries[scope.historyIndex].seq + ".", false);
if (restored) {
scope.setStatus("Redid the last change.", false);
}
return restored;
}
return {
@ -837,7 +387,7 @@ export function createHistoryController(scope) {
applyHistorySnapshot,
captureState,
applyState,
applyOperation,
applyOperation: () => false,
restoreToHistoryIndex,
getStateSignature,
formatCellCoord,

View file

@ -4513,11 +4513,12 @@ export function startWorldshaperStudio(bootstrap: WorldshaperStudioBootstrap, in
scope.historySelectionIndex = 0;
scope.lastSavedHistoryId = initialEntry.id;
scope.nextHistoryId = initialEntry.id + 1;
const restoredHistory = scope.restoreHistoryState();
if (!scope.applyHistorySnapshot(restoredHistory)) {
scope.persistHistoryState();
}
try {
if (currentHistoryStorageKey) {
window.localStorage.removeItem(currentHistoryStorageKey);
}
} catch {}
scope.persistHistoryState();
}
function refreshUiForLoadedMap() {

View file

@ -46,7 +46,9 @@ type OverviewChunk = {
height?: number;
backgroundTileId?: string;
roomLayers?: OverviewRoomLayer[];
surfaceRows?: string[];
instances?: unknown[];
instanceCount?: number;
};
type OverviewPayload = {
@ -860,7 +862,9 @@ export function createWorldOverviewWindowController(scope: WorldOverviewScope) {
}
function beginPendingChunkAction(type: "move" | "duplicate", chunkRect: ChunkWorldRect, chunkKey: string, chunk?: OverviewChunk | null) {
const entityCount = Array.isArray(chunk?.instances) ? chunk.instances.length : 0;
const entityCount = Array.isArray(chunk?.instances)
? chunk.instances.length
: Math.max(0, Math.floor(Number(chunk?.instanceCount) || 0));
if (type === "move" && entityCount > 0) {
const confirmed = window.confirm(
"Move chunk " + chunkRect.chunkX + "," + chunkRect.chunkY + "?\n\nThis will also move " + entityCount + " placed entit" + (entityCount === 1 ? "y" : "ies") + ".",
@ -1395,13 +1399,15 @@ export function createWorldOverviewWindowController(scope: WorldOverviewScope) {
return String(entry?.symbol || ".").charAt(0) || ".";
}
function getTopVisibleSymbol(chunk: OverviewChunk | null | undefined, localX: number, localY: number) {
function getTopVisibleSymbol(
chunk: OverviewChunk | null | undefined,
sortedRoomLayers: OverviewRoomLayer[],
localX: number,
localY: number,
) {
const backgroundSymbol = getBackgroundSymbol(chunk);
const roomLayers = Array.isArray(chunk?.roomLayers)
? chunk.roomLayers.slice().sort((left: OverviewRoomLayer, right: OverviewRoomLayer) => (Number(left?.layer) || 0) - (Number(right?.layer) || 0))
: [];
let resolvedSymbol = backgroundSymbol || "";
roomLayers.forEach((layer: OverviewRoomLayer) => {
sortedRoomLayers.forEach((layer: OverviewRoomLayer) => {
const layerNumber = Number(layer?.layer) || 0;
const fillChar = layerNumber === 0 ? "." : " ";
const row = Array.isArray(layer?.rows) ? String(layer.rows[localY] || "") : "";
@ -1433,7 +1439,8 @@ export function createWorldOverviewWindowController(scope: WorldOverviewScope) {
}
function buildChunkSurfaceSignature(chunk: OverviewChunk | null | undefined) {
const roomLayerSig = (Array.isArray(chunk?.roomLayers) ? chunk.roomLayers : [])
const surfaceSig = Array.isArray(chunk?.surfaceRows) ? chunk.surfaceRows.join("|") : "";
const roomLayerSig = surfaceSig || (Array.isArray(chunk?.roomLayers) ? chunk.roomLayers : [])
.map((layer: OverviewRoomLayer) => String(Number(layer?.layer) || 0) + ":" + (Array.isArray(layer?.rows) ? layer.rows.join("|") : ""))
.join("~");
return [
@ -1459,10 +1466,18 @@ export function createWorldOverviewWindowController(scope: WorldOverviewScope) {
canvas.height = chunkHeight;
const ctx = canvas.getContext("2d");
if (ctx) {
const surfaceRows = Array.isArray(chunk?.surfaceRows) ? chunk.surfaceRows : null;
const sortedRoomLayers = Array.isArray(chunk?.roomLayers)
? chunk.roomLayers.slice().sort((left: OverviewRoomLayer, right: OverviewRoomLayer) => (Number(left?.layer) || 0) - (Number(right?.layer) || 0))
: [];
const imageData = ctx.createImageData(chunkWidth, chunkHeight);
for (let localY = 0; localY < chunkHeight; localY += 1) {
const surfaceRow = surfaceRows ? String(surfaceRows[localY] || "") : "";
for (let localX = 0; localX < chunkWidth; localX += 1) {
const color = getSymbolColor(getTopVisibleSymbol(chunk, localX, localY), chunk);
const visibleSymbol = surfaceRow
? (String(surfaceRow.charAt(localX) || ".").charAt(0) || ".")
: getTopVisibleSymbol(chunk, sortedRoomLayers, localX, localY);
const color = getSymbolColor(visibleSymbol, chunk);
const pixelIndex = (localY * chunkWidth + localX) * 4;
imageData.data[pixelIndex] = color[0];
imageData.data[pixelIndex + 1] = color[1];