Fix #45 (#46)

* add touch

* update css

* add lowerdebouncetime

* add settings cache

* organize imports

src/assets/style.css

@@ -152,21 +152,21 @@ body {
 }
 
 #more-popup > .item > .heading {
-  font-size: 0.9rem;
+  font-size: 0.8rem;
   opacity: 0.9;
-  margin-top: 1.2rem;
-  margin-bottom: 0.2rem;
+  margin-top: 0.5rem;
+  margin-bottom: 0.1rem;
   pointer-events: none;
 }
 
 #more-popup > .item > .text {
-  font-size: 0.7rem;
+  font-size: 0.75rem;
   white-space: pre;
 }
 
 #more-popup > .item > .button-container {
-  font-size: 0.7rem;
-  margin-bottom: 8px;
+  font-size: 0.65rem;
+  margin-bottom: -1px;
   white-space: pre;
 
   display: flex;
@@ -199,7 +199,7 @@ body {
   flex-direction: row;
   align-items: center;
   cursor: pointer;
-  margin-bottom: 1px;
+  line-height: 1.1;
 }
 
 #more-popup > .item > .input-container:hover {

src/bootstrap.ts

@@ -25,6 +25,7 @@ import { SettingsUtils } from "./lib/utility/settings-utils";
 import { PanelContainerController } from "./controllers/panel-container-controller";
 import { DomUtils } from "./lib/utility/dom-utils";
 import { GtagUtils } from "./lib/utility/gtag-utils";
+import { PerformanceUtils } from "./lib/utility/performance-utils.js";
 
 const lazy = null as unknown;
 const D = {
@@ -191,11 +192,9 @@ function setupMoreController() {
 
   const actionKey = DomUtils.isMac() ? "Cmd" : "Ctrl";
   D.morePopupController.appendText("To share a playground, press 'Save'");
-  D.morePopupController.appendHeading("commands");
   D.morePopupController.appendButton("Save", `${actionKey}-S`, save.bind(null, false));
   D.morePopupController.appendButton("Save and shorten link", `${actionKey}-Shift-S`, save.bind(null, true));
   D.morePopupController.appendButton("Toggle type-editor", `F2`, toggleTypeEditor);
-  D.morePopupController.appendText(" ");
 
   D.morePopupController.appendHeading("typescript-format");
   append("semi", "ts-format:semi", formatEditors);
@@ -212,6 +211,7 @@ function setupMoreController() {
   append("save-view-state", "save:save-view-state");
   D.morePopupController.appendHeading("editor");
   append("indent-guide", "editor:indent-guide", updateEditorOptions);
+  append("lower-debounce-time", "editor:lower-debounce-time");
 }
 
 function initExecuter() {
@@ -314,6 +314,15 @@ function toggleTypeEditor() {
 
 function setupTypeEditorController() {
   D.typeEditorController.setValue(D.state.editors.type);
+
+  // issue 45
+  let timeout: any;
+  D.typeEditorController.onChange(() => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      D.queryEditorController.touch();
+    }, PerformanceUtils.getDebounceTime());
+  });
 }
 
 function setupQueryEditorController() {

src/controllers/editor-controller.ts

@@ -3,6 +3,7 @@ import { CssUtils } from "../lib/utility/css-utils";
 import { logger } from "../lib/utility/logger";
 import { StringUtils } from "../lib/utility/string-utils";
 import { DEBUG } from "../lib/constants";
+import { PerformanceUtils } from "../lib/utility/performance-utils.js";
 
 export class EditorController {
   static async init(
@@ -76,7 +77,7 @@ export class EditorController {
         clearTimeout(this.onChangeHandle);
         this.onChangeHandle = setTimeout(() => {
           this.invokeOnChange();
-        }, 500);
+        }, PerformanceUtils.getDebounceTime());
       });
     });
   }
@@ -186,6 +187,10 @@ export class EditorController {
     });
   }
 
+  touch() {
+    this.setValue(this.getValue());
+  }
+
   private getHiddenHeaderLineLength() {
     if (!this.hiddenHeader) {
       return 0;

src/lib/constants.ts

@@ -41,6 +41,7 @@ export const SETTING_KEYS = [
   "save:copy-url-after-save",
   "save:save-view-state",
   "editor:indent-guide",
+  "editor:lower-debounce-time",
 ] as const;
 
 export const SETTING_DEFAULTS: Record<(typeof SETTING_KEYS)[number], boolean> = {
@@ -53,6 +54,7 @@ export const SETTING_DEFAULTS: Record<(typeof SETTING_KEYS)[number], boolean> =
   "save:copy-url-after-save": true,
   "save:save-view-state": true,
   "editor:indent-guide": true,
+  "editor:lower-debounce-time": false,
 };
 
 export const DIALECT_CONSTRUCTORS = {
@@ -78,6 +80,9 @@ export const DIALECT_CONSTRUCTORS = {
   },
 };
 
+export const DEBOUNCE_TIME = 400;
+export const DEBOUNCE_TIME_LOWER = 150;
+
 export const DEFUALT_STATE: State = {
   dialect: "postgres",
   editors: {

src/lib/utility/performance-utils.ts

@@ -0,0 +1,11 @@
+import { DEBOUNCE_TIME, DEBOUNCE_TIME_LOWER } from "../constants.js";
+import { SettingsUtils } from "./settings-utils.js";
+
+export class PerformanceUtils {
+  static getDebounceTime() {
+    if (SettingsUtils.get("editor:lower-debounce-time")) {
+      return DEBOUNCE_TIME_LOWER;
+    }
+    return DEBOUNCE_TIME;
+  }
+}

src/lib/utility/settings-utils.ts

@@ -1,17 +1,25 @@
 import { LOCALSTORAGE_SETTINGS, SETTING_DEFAULTS, SETTING_KEYS } from "../constants";
 
+const cache: Map<string, boolean> = new Map();
+
 export class SettingsUtils {
   static get(settingKey: (typeof SETTING_KEYS)[number]): boolean {
     const key = LOCALSTORAGE_SETTINGS + settingKey;
+    if (cache.has(key)) {
+      return cache.get(key) as boolean;
+    }
     const item = localStorage.getItem(key);
+    let value = item === "1";
     if (item === null) {
-      return SETTING_DEFAULTS[settingKey];
+      value = SETTING_DEFAULTS[settingKey];
     }
-    return item === "1";
+    cache.set(key, value);
+    return value;
   }
 
   static set(settingKey: (typeof SETTING_KEYS)[number], value: boolean) {
     const key = LOCALSTORAGE_SETTINGS + settingKey;
     localStorage.setItem(key, value ? "1" : "0");
+    cache.set(key, value);
   }
 }