diff --git a/web/_css/style.css b/web/_css/style.css index 8592e97b..fc142100 100644 --- a/web/_css/style.css +++ b/web/_css/style.css @@ -491,6 +491,16 @@ .object p { margin-bottom: 10px; } +p.edit { + color: #FFFF00; +} +p.add { + color: #00FF00; +} +p.delete { + color: #FF0000; +} + #drawControlsContainer { background-color: #444; border-right: 1px #000 solid; diff --git a/web/_js/infoblock.js b/web/_js/infoblock.js index 759e0e32..441f6ad7 100644 --- a/web/_js/infoblock.js +++ b/web/_js/infoblock.js @@ -22,6 +22,12 @@ function createInfoBlock(entry) { element.appendChild(headerElement); + if (entry.diff) { + let diffElement = createInfoParagraph("Diff: ", entry.diff); + diffElement.className = entry.diff; + element.appendChild(diffElement); + } + if (entry.description) { let descElement = document.createElement("p"); descElement.innerText = entry.description; diff --git a/web/_js/main.js b/web/_js/main.js index c2646079..9bcc02cf 100644 --- a/web/_js/main.js +++ b/web/_js/main.js @@ -146,11 +146,7 @@ async function init(){ a[c.id] = c; return a; },{}); - if(mode.endsWith("only")){ - atlas = atlas.filter(function(entry) { - return JSON.stringify(entry) !== JSON.stringify(liveAtlasReduced[entry.id]); - }); - } + // Mark added/edited entries atlas = atlas.map(function(entry) { if(liveAtlasReduced[entry.id] === undefined){ entry.diff = "add"; @@ -159,12 +155,36 @@ async function init(){ } return entry; }); + + // Mark removed entries + let atlasReduced = atlas.reduce(function(a, c) { + a[c.id] = c; + return a; + },{}); + let removedEntries = liveJson.map(function(entry) { + if(atlasReduced[entry.id] === undefined){ + entry.diff = "delete"; + } + return entry; + }); + atlas.push(...removedEntries) + + if(mode.includes("only")){ + atlas = atlas.filter(function(entry) { + return typeof entry.diff == "string" + }); + } + //TEMP FOR TIME TRAVEL atlasBackup = atlas; } catch (error) { console.log("Diff mode failed to load, reverting to normal view - " + error); } finally { - initView(); + if(initOverlap && mode.includes("overlap")){ + initOverlap(); + } else { + initView(); + } } } diff --git a/web/_js/view.js b/web/_js/view.js index 75f3cf70..98a72581 100644 --- a/web/_js/view.js +++ b/web/_js/view.js @@ -124,6 +124,10 @@ function renderBackground(atlas){ bgStrokeStyle = "rgba(255, 255, 0, 1)"; backgroundContext.lineWidth = 2; break; + case "delete": + bgStrokeStyle = "rgba(255, 0, 0, 1)"; + backgroundContext.lineWidth = 2; + break; default: bgStrokeStyle = "rgba(255, 255, 255, 0.8)"; break;