From 93a41f6e2cd3131e7093075069caa45656e27af3 Mon Sep 17 00:00:00 2001
From: Matt Furden <zolrath@gmail.com>
Date: Wed, 30 Nov 2022 14:26:07 -0800
Subject: [PATCH] Move UI setup to its own event

Right now every single time text is selected a new event handler is added to the Save/Copy buttons.

This results in a huge number of event handlers being added to the buttons. In my testing after a few selections a single click on Copy the shutter action would be triggered 40+ times.

Here we move the event handler setup to its own event and read the config/paste on update events.
---
 src/extension.js     |  2 ++
 webview/src/index.js | 84 +++++++++++++++++++++++++-------------------
 2 files changed, 49 insertions(+), 37 deletions(-)

diff --git a/src/extension.js b/src/extension.js
index 4c59c5b..f7b3332 100644
--- a/src/extension.js
+++ b/src/extension.js
@@ -76,6 +76,8 @@ const hasOneSelection = (selections) =>
 const runCommand = async (context) => {
   const panel = await createPanel(context);
 
+  panel.webview.postMessage({ type: 'setup-ui', ...getConfig() });
+
   const update = async () => {
     await vscode.commands.executeCommand('editor.action.clipboardCopyWithSyntaxHighlightingAction');
     panel.webview.postMessage({ type: 'update', ...getConfig() });
diff --git a/webview/src/index.js b/webview/src/index.js
index 49107ba..d720a6a 100644
--- a/webview/src/index.js
+++ b/webview/src/index.js
@@ -9,7 +9,7 @@ const btnSave = $('#save');
 const btnCopy = $('#secondMainBtn');
 
 const showLineNumBtn = $('#showLineNumBtn');
-const showWindowControls = $('#showWindowControls');
+const showWindowControlsBtn = $('#showWindowControlsBtn');
 const modeChangeBtn = $("#modeChangeBtn")
 
 let _toolMode;
@@ -23,44 +23,19 @@ document.addEventListener('copy', () => takeSnap({ ...config, shutterAction: 'co
 document.addEventListener('paste', (e) => pasteCode(config, e.clipboardData));
 
 window.addEventListener('message', ({ data: { type, ...cfg } }) => {
-  if (type === 'update') {
+  if (type === 'setup-ui') {
     config = cfg;
 
     const {
-      fontLigatures,
-      tabSize,
-      backgroundColor,
-      boxShadow,
-      containerPadding,
-      roundedCorners,
-      showWindowControls,
       showWindowTitle,
-      windowTitle,
       shutterAction,
-      showLineNumbers,
       toolMode
     } = config;
 
     _toolMode = toolMode
 
-    setVar('ligatures', fontLigatures ? 'normal' : 'none');
-    if (typeof fontLigatures === 'string') setVar('font-features', fontLigatures);
-    setVar('tab-size', tabSize);
-    setVar('container-background-color', backgroundColor);
-    setVar('box-shadow', boxShadow);
-    setVar('container-padding', containerPadding);
-    setVar('window-border-radius', roundedCorners ? '4px' : 0);
-
-    navbarNode.hidden = !showWindowControls && !showWindowTitle;
-    windowControlsNode.hidden = !showWindowControls;
-    windowTitleNode.hidden = !showWindowTitle;
-
-    windowTitleNode.textContent = windowTitle;
-
-    document.execCommand('paste');
-
     let actions = []
-    if(shutterAction == "save") {
+    if (shutterAction === "save") {
       actions = [
         () => takeSnap(config), 
         () => takeSnap({ ...config, shutterAction: 'copy' }),
@@ -77,12 +52,7 @@ window.addEventListener('message', ({ data: { type, ...cfg } }) => {
     btnSave.addEventListener('click', actions[0])
     btnCopy.addEventListener('click', actions[1])
 
-    if(!showLineNumbers) {
-      document.getElementById('showLineNumBtn').children[0].children[0].classList.toggle('opacity-0');
-    }
-
     showLineNumBtn.addEventListener('click', () => {
-
       document.getElementById('showLineNumBtn').children[0].children[0].classList.toggle('opacity-0');
 
       // showLineNumBtn.firstChild.classList.toggle('opacity-100');
@@ -94,9 +64,7 @@ window.addEventListener('message', ({ data: { type, ...cfg } }) => {
       })
     })
 
-    if(!showWindowControls){
-      document.getElementById('showWindowControlsBtn').children[0].children[0].classList.toggle('opacity-0');
-    }
+
     showWindowControlsBtn.addEventListener('click', () => {
       document.getElementById('showWindowControlsBtn').children[0].children[0].classList.toggle('opacity-0');
       windowControlsNode.hidden = !windowControlsNode.hidden
@@ -109,14 +77,56 @@ window.addEventListener('message', ({ data: { type, ...cfg } }) => {
       _toolMode = _toolMode==='advanced' ? 'simple': 'advanced'
       toolModeToggled()
     })
+  }
+  else if (type === 'update') {
+    config = cfg;
 
+    const {
+      fontLigatures,
+      tabSize,
+      backgroundColor,
+      boxShadow,
+      containerPadding,
+      roundedCorners,
+      showWindowControls,
+      showWindowTitle,
+      windowTitle,
+      showLineNumbers,
+      toolMode
+    } = config;
+
+    _toolMode = toolMode
+
+    setVar('ligatures', fontLigatures ? 'normal' : 'none');
+    if (typeof fontLigatures === 'string') setVar('font-features', fontLigatures);
+    setVar('tab-size', tabSize);
+    setVar('container-background-color', backgroundColor);
+    setVar('box-shadow', boxShadow);
+    setVar('container-padding', containerPadding);
+    setVar('window-border-radius', roundedCorners ? '4px' : 0);
+
+    navbarNode.hidden = !showWindowControls && !showWindowTitle;
+    windowControlsNode.hidden = !showWindowControls;
+    windowTitleNode.hidden = !showWindowTitle;
+
+    windowTitleNode.textContent = windowTitle;
+
+    if (!showLineNumbers) {
+      document.getElementById('showLineNumBtn').children[0].children[0].classList.toggle('opacity-0');
+    }
+
+    if (!showWindowControls){
+      document.getElementById('showWindowControlsBtn').children[0].children[0].classList.toggle('opacity-0');
+    }
+
+    document.execCommand('paste');
   } else if (type === 'flash') {
     cameraFlashAnimation();
   }
 });
 
 const toolModeToggled = () => {
-  if(_toolMode=='advanced') {
+  if(_toolMode === 'advanced') {
     btnCopy.classList.remove("hidden")
     $('#showLineNumBtn').classList.remove("hidden")
     $('#showWindowControlsBtn').classList.remove("hidden")