From 736dd46831f1f1058094abf07b94b464bccabdba Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 12 Aug 2022 13:36:24 +0530 Subject: [PATCH 1/3] fix #914 Add render diagram keyboard shortcut --- cypress/e2e/diagramUpdate.spec.ts | 9 +++++++++ src/lib/components/editor.svelte | 9 +++++++++ src/lib/util/util.ts | 2 ++ src/routes/edit.svelte | 4 ++-- 4 files changed, 22 insertions(+), 2 deletions(-) diff --git a/cypress/e2e/diagramUpdate.spec.ts b/cypress/e2e/diagramUpdate.spec.ts index 36746daf..63726d1b 100644 --- a/cypress/e2e/diagramUpdate.spec.ts +++ b/cypress/e2e/diagramUpdate.spec.ts @@ -21,6 +21,15 @@ describe('Auto sync tests', () => { cy.getLocalStorage('codeStore').snapshot(); }); + it('should update diagram when shortcut is used', () => { + cy.contains('Auto sync').click(); + cy.get('#view').should('not.have.class', 'outOfSync'); + getEditor().type(' C --> Test'); + cy.get('#view').should('have.class', 'outOfSync'); + getEditor().type(`{${cmd}}{enter}`); + cy.get('#view').should('not.have.class', 'outOfSync'); + }); + it('should show/hide sync button with auto sync', () => { cy.get('[data-cy=sync]').should('not.exist'); cy.contains('Auto sync').click(); diff --git a/src/lib/components/editor.svelte b/src/lib/components/editor.svelte index 1399a350..999f7ded 100644 --- a/src/lib/components/editor.svelte +++ b/src/lib/components/editor.svelte @@ -2,6 +2,7 @@ import type { EditorEvents } from '$lib/types'; import { stateStore } from '$lib/util/state'; import { themeStore } from '$lib/util/theme'; + import { syncDiagram } from '$lib/util/util'; import type monaco from 'monaco-editor'; import { createEventDispatcher, onMount } from 'svelte'; import initEditor from 'monaco-mermaid'; @@ -66,6 +67,14 @@ text }); }); + editor.addAction({ + id: 'mermaid-render-diagram', + label: 'Render Diagram', + keybindings: [Monaco.KeyMod.CtrlCmd | Monaco.KeyCode.Enter], + run: function () { + syncDiagram(); + } + }); Monaco?.editor.setTheme($themeStore.isDark ? 'mermaid-dark' : 'mermaid'); const resizeObserver = new ResizeObserver((entries) => { editor.layout({ diff --git a/src/lib/util/util.ts b/src/lib/util/util.ts index 84e02992..1739ebf7 100644 --- a/src/lib/util/util.ts +++ b/src/lib/util/util.ts @@ -22,3 +22,5 @@ export const initHandler = async (): Promise => { await initAnalytics(); analytics?.page(); }; + +export const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0; diff --git a/src/routes/edit.svelte b/src/routes/edit.svelte index dfe45d07..d86b5e1f 100644 --- a/src/routes/edit.svelte +++ b/src/routes/edit.svelte @@ -7,7 +7,7 @@ import Card from '$lib/components/card/card.svelte'; import History from '$lib/components/history/history.svelte'; import { updateCode, updateConfig, inputStateStore, stateStore } from '$lib/util/state'; - import { initHandler, syncDiagram } from '$lib/util/util'; + import { initHandler, isMac, syncDiagram } from '$lib/util/util'; import { onMount } from 'svelte'; import type { EditorUpdateEvent, State, Tab, DocConfig } from '$lib/types'; import { base } from '$app/paths'; @@ -154,7 +154,7 @@ {#if !$stateStore.autoSync} {/if} From 0086ba9f2aacc8a0ca9b7a807235e679cca99044 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 12 Aug 2022 13:54:35 +0530 Subject: [PATCH 2/3] Add message in popup --- src/lib/util/fileLoaders/loader.ts | 4 ++-- src/lib/util/state.ts | 7 ++++--- src/lib/util/util.ts | 3 ++- src/routes/edit.svelte | 4 ++-- 4 files changed, 10 insertions(+), 8 deletions(-) diff --git a/src/lib/util/fileLoaders/loader.ts b/src/lib/util/fileLoaders/loader.ts index 5ae52826..ea63800a 100644 --- a/src/lib/util/fileLoaders/loader.ts +++ b/src/lib/util/fileLoaders/loader.ts @@ -7,7 +7,7 @@ const loaders: Record = { export const loadDataFromUrl = async (): Promise => { const searchParams = new URLSearchParams(window.location.search); - let state: State = defaultState; + let state: Partial = defaultState; let code: string, config: string; let loaded = false; const codeURL: string = searchParams.get('code'); @@ -48,7 +48,7 @@ export const loadDataFromUrl = async (): Promise => { configURL } } - } as State; + }; } loaded && updateCodeStore({ diff --git a/src/lib/util/state.ts b/src/lib/util/state.ts index 6770cf75..e352c20d 100644 --- a/src/lib/util/state.ts +++ b/src/lib/util/state.ts @@ -2,6 +2,7 @@ import { writable, get, derived } from 'svelte/store'; import { persist, localStorage } from '@macfja/svelte-persistent-store'; import { saveStatistics } from './stats'; import { serializeState, deserializeState } from './serde'; +import { cmdKey } from './util'; import mermaid from 'mermaid'; import type { Readable } from 'svelte/store'; @@ -104,7 +105,7 @@ export const loadState = (data: string): void => { updateCodeStore({ ...state, updateEditor: true }); }; -export const updateCodeStore = (newState: State): void => { +export const updateCodeStore = (newState: Partial): void => { inputStateStore.update((state) => { return { ...state, ...newState }; }); @@ -120,13 +121,13 @@ export const updateCode = ( if (lines > 50 && !prompted && get(stateStore).autoSync) { const turnOff = confirm( - 'Long diagram detected. Turn off Auto Sync? Click the sync logo to manually sync.' + `Long diagram detected. Turn off Auto Sync? Use ${cmdKey} + Enter or click the sync logo to manually sync.` ); prompted = true; if (turnOff) { updateCodeStore({ autoSync: false - } as State); + }); } } diff --git a/src/lib/util/util.ts b/src/lib/util/util.ts index 1739ebf7..851768eb 100644 --- a/src/lib/util/util.ts +++ b/src/lib/util/util.ts @@ -11,7 +11,7 @@ export const loadStateFromURL = (): void => { export const syncDiagram = (): void => { updateCodeStore({ updateDiagram: true - } as State); + }); }; export const initHandler = async (): Promise => { @@ -24,3 +24,4 @@ export const initHandler = async (): Promise => { }; export const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0; +export const cmdKey = isMac ? 'Cmd' : 'Ctrl'; diff --git a/src/routes/edit.svelte b/src/routes/edit.svelte index d86b5e1f..9db0e8aa 100644 --- a/src/routes/edit.svelte +++ b/src/routes/edit.svelte @@ -7,7 +7,7 @@ import Card from '$lib/components/card/card.svelte'; import History from '$lib/components/history/history.svelte'; import { updateCode, updateConfig, inputStateStore, stateStore } from '$lib/util/state'; - import { initHandler, isMac, syncDiagram } from '$lib/util/util'; + import { cmdKey, initHandler, syncDiagram } from '$lib/util/util'; import { onMount } from 'svelte'; import type { EditorUpdateEvent, State, Tab, DocConfig } from '$lib/types'; import { base } from '$app/paths'; @@ -154,7 +154,7 @@ {#if !$stateStore.autoSync} {/if} From aaa69216a645856cf128f9e0f95e43f104df60c9 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 12 Aug 2022 14:42:09 +0530 Subject: [PATCH 3/3] Fix import --- src/lib/util/util.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/lib/util/util.ts b/src/lib/util/util.ts index 851768eb..f9afd0a5 100644 --- a/src/lib/util/util.ts +++ b/src/lib/util/util.ts @@ -1,4 +1,3 @@ -import type { State } from '$lib/types'; import { initURLSubscription, loadState, updateCodeStore } from './state'; import { analytics, initAnalytics } from './stats'; import { loadDataFromUrl } from './fileLoaders/loader';