Merge pull request #1050 from mermaid-js/sidv/syncMessage

feat: Add out of sync message

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');
 	});
 

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>

yarn.lock

@@ -1014,9 +1014,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001370, caniuse-lite@^1.0.30001399:
-  version "1.0.30001402"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001402.tgz"
-  integrity sha512-Mx4MlhXO5NwuvXGgVb+hg65HZ+bhUYsz8QtDGDo2QmaJS2GBX47Xfi2koL86lc8K+l+htXeTEB/Aeqvezoo6Ew==
+  version "1.0.30001407"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001407.tgz"
+  integrity sha512-4ydV+t4P7X3zH83fQWNDX/mQEzYomossfpViCOx9zHBSMV+rIe3LFqglHHtVyvNl1FhTNxPxs3jei82iqOW04w==
 
 caseless@~0.12.0:
   version "0.12.0"