From 85ed4187e85cc4ff3854f3fec2cbc04d9fd050d1 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 20 Sep 2022 12:45:38 +0530
Subject: [PATCH] feat: Add out of sync message

---
 cypress/e2e/diagramUpdate.spec.ts | 4 ++++
 src/lib/components/view.svelte    | 7 +++++++
 2 files changed, 11 insertions(+)

diff --git a/cypress/e2e/diagramUpdate.spec.ts b/cypress/e2e/diagramUpdate.spec.ts
index b6b415f3..533a1adc 100644
--- a/cypress/e2e/diagramUpdate.spec.ts
+++ b/cypress/e2e/diagramUpdate.spec.ts
@@ -9,8 +9,10 @@ describe('Auto sync tests', () => {
 	it('should dim diagram when code is edited', () => {
 		cy.contains('Auto sync').click();
 		cy.get('#view').should('not.have.class', 'outOfSync');
+		cy.get('#view').should('not.contain.text', 'Diagram out of sync.');
 		getEditor().type('  C --> Test');
 		cy.get('#view').should('have.class', 'outOfSync');
+		cy.get('#view').should('contain.text', 'Diagram out of sync.');
 		cy.getLocalStorage('codeStore').snapshot();
 	});
 
@@ -19,7 +21,9 @@ describe('Auto sync tests', () => {
 		cy.get('#view').should('not.have.class', 'outOfSync');
 		getEditor().type('  C --> Test');
 		cy.get('#view').should('have.class', 'outOfSync');
+		cy.get('#view').should('contain.text', 'Diagram out of sync.');
 		getEditor().type(`${cmd}{enter}`);
+		cy.get('#view').should('not.contain.text', 'Diagram out of sync.');
 		cy.get('#view').should('not.have.class', 'outOfSync');
 	});
 
diff --git a/src/lib/components/view.svelte b/src/lib/components/view.svelte
index bb6d9f2d..8cf21549 100644
--- a/src/lib/components/view.svelte
+++ b/src/lib/components/view.svelte
@@ -5,6 +5,7 @@
 	import panzoom from 'svg-pan-zoom';
 	import type { State, ValidatedState } from '$lib/types';
 	import { logEvent } from '$lib/util/stats';
+	import { cmdKey } from '$lib/util/util';
 
 	let code = '';
 	let config = '';
@@ -109,6 +110,12 @@
 	<div class="p-2 text-red-600" id="errorContainer">{$stateStore.error}</div>
 {/if}
 
+{#if outOfSync}
+	<div class="absolute w-full p-2 z-10 text-yellow-600 bg-base-100 bg-opacity-80 text-center">
+		Diagram out of sync. <br />
+		Press <i class="fas fa-sync" /> (Sync button) or <kbd>{cmdKey} + Enter</kbd> to sync.
+	</div>
+{/if}
 <div id="view" bind:this={view} class="p-2 h-full" class:error class:outOfSync>
 	<div id="container" bind:this={container} class="h-full overflow-auto" class:hide />
 </div>