A few settings

Author: octref

package.json

@@ -37,7 +37,31 @@
         "command": "polacode.activate",
         "title": "Polacode 📸"
       }
-    ]
+    ],
+    "configuration": {
+      "title": "Polacode",
+      "properties": {
+        "polacode.shadow": {
+          "type": "string",
+          "description": "Shadow of the snippet node",
+          "default": "rgba(0, 0, 0, 0.55) 0px 20px 68px"
+        },
+        "polacode.background": {
+          "type": "string",
+          "description": "Background of the container node",
+          "default": "rgba(242, 242, 242, 1)"
+        },
+        "polacode.target": {
+          "type": "string",
+          "description": "Shoot with or without container",
+          "default": "container",
+          "enum": [
+            "container",
+            "snippet"
+          ]
+        }
+      }
+    }
   },
   "devDependencies": {
     "@types/node": "^11.12.0",

src/extension.js

@@ -56,11 +56,13 @@ function activate(context) {
               }
             })
           break
-        case 'getAndUpdateBgColor':
+        case 'getAndUpdateCacheAndSettings':
           panel.webview.postMessage({
             type: 'restoreBgColor',
             bgColor: context.globalState.get('polacode.bgColor', '#2e3440')
           })
+
+          syncSettings()
           break
         case 'updateBgColor':
           context.globalState.update('polacode.bgColor', data.bgColor)
@@ -80,8 +82,20 @@ function activate(context) {
       fontFamily,
       bgColor
     })
+
+    syncSettings()
   })
 
+  function syncSettings() {
+    const settings = vscode.workspace.getConfiguration('polacode')
+    panel.webview.postMessage({
+      type: 'updateSettings',
+      shadow: settings.get('shadow'),
+      background: settings.get('background'),
+      target: settings.get('target')
+    })
+  }
+
   vscode.window.onDidChangeTextEditorSelection(e => {
     if (e.selections[0] && !e.selections[0].isEmpty) {
       vscode.commands.executeCommand('editor.action.clipboardCopyAction')
@@ -90,6 +104,18 @@ function activate(context) {
       })
     }
   })
+
+  vscode.workspace.onDidChangeConfiguration(e => {
+    if (e.affectsConfiguration('polacode')) {
+      const settings = vscode.workspace.getConfiguration('polacode')
+      panel.webview.postMessage({
+        type: 'updateSettings',
+        shadow: settings.get('shadow'),
+        background: settings.get('background'),
+        target: settings.get('target')
+      })
+    }
+  })
 }
 
 function getHtmlContent(htmlPath) {

webview/index.js

@@ -1,8 +1,10 @@
 ;(function() {
   const vscode = acquireVsCodeApi()
 
+  let target = 'container'
+
   vscode.postMessage({
-    type: 'getAndUpdateBgColor'
+    type: 'getAndUpdateCacheAndSettings'
   })
 
   const snippetNode = document.getElementById('snippet')
@@ -57,7 +59,7 @@
   }
   function getSnippetBgColor(html) {
     const match = html.match(/background-color: (#[a-fA-F0-9]+)/)
-    return match[1] ? match[1] : undefined;
+    return match ? match[1] : undefined;
   }
 
   function updateEnvironment(snippetBgColor) {
@@ -124,23 +126,64 @@
   })
 
   obturateur.addEventListener('click', () => {
+    if (target === 'container') {
+      shootAll() 
+    } else {
+      shootSnippet()
+    }
+  })
+
+  function shootAll() {
     const width = snippetContainerNode.offsetWidth * 2
     const height = snippetContainerNode.offsetHeight * 2
     const config = {
       width,
       height,
       style: {
         transform: 'scale(2)',
-        'transform-origin': 'left top'
+        'transform-origin': 'center'
       }
     }
 
+    // Hide resizer before capture
+    snippetNode.style.resize = 'none'
+    snippetContainerNode.style.resize = 'none'
+
     domtoimage.toBlob(snippetContainerNode, config).then(blob => {
+      snippetNode.style.resize = ''
+      snippetContainerNode.style.resize = ''
       serializeBlob(blob, serializedBlob => {
         shoot(serializedBlob)
       })
     })
-  })
+  }
+
+  function shootSnippet() {
+    const width = snippetNode.offsetWidth * 2
+    const height = snippetNode.offsetHeight * 2
+    const config = {
+      width,
+      height,
+      style: {
+        transform: 'scale(2)',
+        'transform-origin': 'center',
+        padding: 0,
+        background: 'none'
+      }
+    }
+
+    // Hide resizer before capture
+    snippetNode.style.resize = 'none'
+    snippetContainerNode.style.resize = 'none'
+
+    domtoimage.toBlob(snippetContainerNode, config).then(blob => {
+      snippetNode.style.resize = ''
+      snippetContainerNode.style.resize = ''
+      serializeBlob(blob, serializedBlob => {
+        shoot(serializedBlob)
+      })
+    })
+  }
 
   let isInAnimation = false
 
@@ -190,6 +233,10 @@
         updateEnvironment(e.data.bgColor)
       } else if (e.data.type === 'restoreBgColor') {
         updateEnvironment(e.data.bgColor)
+      } else if (e.data.type === 'updateSettings') {
+        snippet.style.boxShadow = e.data.shadow
+        target = e.data.target
+        snippetContainerNode.style.background = e.data.background
       }
     }
   })