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 UI setup to its own event and only trigger paste during the update event.

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() });

webview/src/index.js

@@ -23,7 +23,7 @@ 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 {
@@ -57,10 +57,8 @@ window.addEventListener('message', ({ data: { type, ...cfg } }) => {
 
     windowTitleNode.textContent = windowTitle;
 
-    document.execCommand('paste');
-
     let actions = []
-    if(shutterAction == "save") {
+    if (shutterAction === "save") {
       actions = [
         () => takeSnap(config), 
         () => takeSnap({ ...config, shutterAction: 'copy' }),
@@ -77,12 +75,11 @@ window.addEventListener('message', ({ data: { type, ...cfg } }) => {
     btnSave.addEventListener('click', actions[0])
     btnCopy.addEventListener('click', actions[1])
 
-    if(!showLineNumbers) {
+    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 +91,10 @@ window.addEventListener('message', ({ data: { type, ...cfg } }) => {
       })
     })
 
-    if(!showWindowControls){
+    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 +107,16 @@ window.addEventListener('message', ({ data: { type, ...cfg } }) => {
       _toolMode = _toolMode==='advanced' ? 'simple': 'advanced'
       toolModeToggled()
     })
-
+  }
+  else if (type === 'update') {
+    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")