From 27d664c51458b91d42766cbafa9748c123e37f29 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sat, 13 Aug 2022 11:20:34 +0530 Subject: [PATCH] Disable debounce in localstorage --- cypress/snapshots.js | 6 +++--- src/lib/components/view.svelte | 2 +- src/lib/util/util.ts | 2 +- src/routes/edit.svelte | 34 +++++++++++++++++++++------------- 4 files changed, 26 insertions(+), 18 deletions(-) diff --git a/cypress/snapshots.js b/cypress/snapshots.js index 0de6a809..396b7ce6 100644 --- a/cypress/snapshots.js +++ b/cypress/snapshots.js @@ -7,13 +7,13 @@ module.exports = { "1": "{\"code\":\"graph TD\\n A[Christmas] -->|Get money| B(Go shopping)\\n B --> C{Let me think}\\n C -->|One| D[Laptop]\\n C -->|Two| E[iPhone]\\n C -->|Three| F[fa:fa-car Car]\",\"mermaid\":\"{\\n \\\"theme\\\": \\\"default\\\"\\n}\",\"updateEditor\":false,\"autoSync\":true,\"updateDiagram\":true}" }, "should load diagram from gist": { - "1": "{\"code\":\"graph TD\\n A[Party] -->|Get money| B(Go shopping!!)\\n \",\"mermaid\":\"{\\n \\\"theme\\\": \\\"forest\\\",\\n \\\"test\\\": \\\"hello world\\\"\\n}\",\"updateEditor\":false,\"autoSync\":true,\"updateDiagram\":true,\"loader\":{\"type\":\"gist\",\"config\":{\"url\":\"https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a\"}}}" + "1": "{\"code\":\"graph TD\\n A[Party] -->|Get money| B(Go shopping!!)\\n \",\"mermaid\":\"{\\n \\\"theme\\\": \\\"forest\\\",\\n \\\"test\\\": \\\"hello world\\\"\\n}\",\"updateEditor\":true,\"autoSync\":true,\"updateDiagram\":true,\"loader\":{\"type\":\"gist\",\"config\":{\"url\":\"https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a\"}}}" }, "should load diagram from gist revision": { - "1": "{\"code\":\"graph TD\\n A[Party] -->|Get money| B(Go shopping)\\n \",\"mermaid\":\"{\\n \\\"theme\\\": \\\"forest\\\",\\n \\\"test\\\": \\\"hello\\\"\\n}\",\"updateEditor\":false,\"autoSync\":true,\"updateDiagram\":true,\"loader\":{\"type\":\"gist\",\"config\":{\"url\":\"https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/ec9b4ab0e41e4ff6287326cd3cb47affd7851e19\"}}}" + "1": "{\"code\":\"graph TD\\n A[Party] -->|Get money| B(Go shopping)\\n \",\"mermaid\":\"{\\n \\\"theme\\\": \\\"forest\\\",\\n \\\"test\\\": \\\"hello\\\"\\n}\",\"updateEditor\":true,\"autoSync\":true,\"updateDiagram\":true,\"loader\":{\"type\":\"gist\",\"config\":{\"url\":\"https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/ec9b4ab0e41e4ff6287326cd3cb47affd7851e19\"}}}" }, "should load diagram from raw files": { - "1": "{\"code\":\"graph TD\\n A[Party] -->|Get money| B(Go shopping!!)\\n \",\"mermaid\":\"{\\n \\\"theme\\\": \\\"forest\\\",\\n \\\"test\\\": \\\"hello world\\\"\\n}\",\"updateEditor\":false,\"autoSync\":true,\"updateDiagram\":true,\"loader\":{\"type\":\"files\",\"config\":{\"codeURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/code.mmd\",\"configURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/config.json\"}}}" + "1": "{\"code\":\"graph TD\\n A[Party] -->|Get money| B(Go shopping!!)\\n \",\"mermaid\":\"{\\n \\\"theme\\\": \\\"forest\\\",\\n \\\"test\\\": \\\"hello world\\\"\\n}\",\"updateEditor\":true,\"autoSync\":true,\"updateDiagram\":true,\"loader\":{\"type\":\"files\",\"config\":{\"codeURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/code.mmd\",\"configURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/config.json\"}}}" } }, "__version": "10.4.0", diff --git a/src/lib/components/view.svelte b/src/lib/components/view.svelte index 89360b21..d92d4977 100644 --- a/src/lib/components/view.svelte +++ b/src/lib/components/view.svelte @@ -70,7 +70,7 @@ pzoom.pan(pan); } hide = false; - }, 0); + }, 1); } }); view.parentElement.scrollTop = scroll; diff --git a/src/lib/util/util.ts b/src/lib/util/util.ts index 9ec706f3..025752e2 100644 --- a/src/lib/util/util.ts +++ b/src/lib/util/util.ts @@ -25,4 +25,4 @@ export const initHandler = async (): Promise => { export const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0; export const cmdKey = isMac ? 'Cmd' : 'Ctrl'; -export const debounceMultiplier = window.localStorage.getItem('noDebounce') === 'true' ? 0 : 1; +export const debounceEnabled = window.localStorage.getItem('noDebounce') !== 'true'; diff --git a/src/routes/edit.svelte b/src/routes/edit.svelte index 023d1f6f..45bbd3e9 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 { cmdKey, debounceMultiplier, initHandler, syncDiagram } from '$lib/util/util'; + import { cmdKey, debounceEnabled, initHandler, syncDiagram } from '$lib/util/util'; import { onMount } from 'svelte'; import type { EditorUpdateEvent, State, Tab, DocConfig } from '$lib/types'; import { base } from '$app/paths'; @@ -101,19 +101,27 @@ } ]; + const handleUpdate = (text: string) => { + if (selectedMode === 'code') { + updateCode(text, { + updateEditor: false + }); + } else { + updateConfig(text, false); + } + }; + let debounce: { [key: string]: number } = {}; - const updateHandler = (message: CustomEvent) => { - clearTimeout(debounce[selectedMode]); - debounce[selectedMode] = window.setTimeout(() => { - const code = message.detail.text; - if (selectedMode === 'code') { - updateCode(code, { - updateEditor: false - }); - } else { - updateConfig(code, false); - } - }, 300 * debounceMultiplier); + const updateHandler = ({ detail: { text } }: CustomEvent) => { + console.log({ debounceEnabled }); + if (debounceEnabled) { + clearTimeout(debounce[selectedMode]); + debounce[selectedMode] = window.setTimeout(() => { + handleUpdate(text); + }, 300); + } else { + handleUpdate(text); + } }; onMount(async () => {