Improved diffview

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;

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;

web/_js/main.js

@@ -146,11 +146,7 @@ async function init(){
 				a[c.id] = c;
 				return a;
 			},{});
-			if(mode.endsWith("only")){
+			// Mark added/edited entries
-				atlas = atlas.filter(function(entry) {
-					return JSON.stringify(entry) !== JSON.stringify(liveAtlasReduced[entry.id]);
-				});
-			}
 			atlas = atlas.map(function(entry) {
 				if(liveAtlasReduced[entry.id] === undefined){
 					entry.diff = "add";
@@ -159,14 +155,38 @@ 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 {
+			if(initOverlap && mode.includes("overlap")){
+				initOverlap();
+			} else {
 				initView();
 			}
 		}
+	}
 	
 	function changeOverlapMode(){
 		console.log(mode)

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;