forkless/mermaid-live-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add out of sync message

Browse Source
This commit is contained in:
Sidharth Vinod
2022-09-20 12:45:38 +05:30
parent 3f3086dae5
commit 85ed4187e8
2 changed files with 11 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cypress/e2e/diagramUpdate.spec.ts
+4
View File
@@ -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
+7
View File
@@ -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>