Why there is "Blue" backgrond

README.md

@@ -1,52 +1,30 @@
 <p>
-  <h2 align="center">Polacode — Polaroid for your code 📸</h2>
+  <h2 align="center">Polacode - 44886 — 基于polacode的一款vscode截图工具 📸</h2>
 </p>
 
-<!-- ![usage](https://github.com/octref/polacode/raw/master/demo/usage.gif) -->
-![usage](./demo/usage.gif)
+<!-- ![usage]() -->
+![usage](https://github.com/octref/polacode/raw/master/demo/usage.gif)
 
-## Why?
+## 为什么要修改原版？
 
-You have spent countless hours finding the perfect [JavaScript grammar](https://marketplace.visualstudio.com/search?term=javascript%20grammar&target=VSCode&category=All%20categories&sortBy=Relevance), matching it with a [sleek-looking VS Code theme](https://marketplace.visualstudio.com/search?target=VSCode&category=Themes&sortBy=Downloads), trying out all the [best programming fonts](https://www.slant.co/topics/67/~best-programming-fonts).
+因为，原版功能太少了！
 
-You take three days porting over [your theme](https://github.com/wesbos/cobalt2-vscode) before starting to use VS Code.  
-You shell out $200 for [italic cursive html attributes](https://www.typography.com/blog/introducing-operator).
+## 改了些什么？
 
-The code has to look right.
+- 原版布局全是用的flex，我不知道这是为何，想要拓展真的很不方便，我把外层全部改为了普通的布局
+- 原版没有苹果装逼的左上角三点，这怎么能行？我加了苹果左上角控制三点
+- 原版如果你是用remote开发，那么这个插件就只能运行在ssh，但那样生成的截图就不能保存在本地，这是什么玩意？我在我电脑上截图，结果截的图放在服务器上？我怎么用？
 
-## Tips
+## 怎么用？
+- 按下你键盘的F1，然后搜索 44886 ，就能看到 `polacode - 44886` ，嗯，点击它！ 
+- 这时，会出来一个新窗口在右边
+- 在左边用鼠标框选你想截图的代码，右边就自动复制过去啦！
+- 你现在可以用电脑自带的截图来截右边的代码，也可以点下方的照相按钮来生成图片。
 
-- Resize the snippet / container by dragging the lowerright corner
-- Use `polacode.target`, `polacode.shadow`, `polacode.transparentBackground` and `polacode.backgroundColor` to control image appearance
+## 下一步要改什么？
+- 要增加代码的行号
+- 还没相好……
 
-## Demo
-
-[Nord](https://github.com/arcticicestudio/nord-visual-studio-code) + [Input Mono](http://input.fontbureau.com)
-
-![demo1](https://raw.githubusercontent.com/octref/polacode/master/demo/1.png)
-
-[Monokai Pro](https://marketplace.visualstudio.com/items?itemName=monokai.theme-monokai-pro-vscode) + [Operator Mono](https://www.typography.com/blog/introducing-operator)
-
-![demo2](https://raw.githubusercontent.com/octref/polacode/master/demo/2.png)
-
-[Material Theme Palenight](https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme) + [Fira Code](https://github.com/tonsky/FiraCode)
-
-![demo3](https://raw.githubusercontent.com/octref/polacode/master/demo/3.png)
-
-## Credit
-
-Thanks to [@tsayen](https://github.com/tsayen) for making [dom-to-image](https://github.com/tsayen/dom-to-image), which Polacode is using for generating the images.
-
-Thanks to [Dawn Labs](https://dawnlabs.io) for making [Carbon](https://carbon.now.sh) that inspired Polacode.
-
-Many color are taken from the elegant [Nord](https://github.com/arcticicestudio/nord) theme by [@arcticicestudio](https://github.com/arcticicestudio).
-
-Download button animation is made with [Vivus](https://github.com/maxwellito/vivus).
-
-## Contribution
-
-Contribution is not very welcome.
-Please open an issue first so I can stop you from complicating the UX.
 
 ## License
 

package.json

@@ -1,19 +1,20 @@
 {
-  "name": "polacode",
-  "displayName": "Polacode",
-  "description": "📸  Polaroid for your code",
-  "version": "0.3.2",
+  "name": "polacode-44886",
+  "displayName": "Polacode-44886",
+  "description": "📸  Polaroid for your code. edit by 44886.(给你的代码一个美美的截图，基于polacode而生)",
+  "version": "1.0.2",
   "repository": {
     "type": "git",
-    "url": "https://github.com/octref/polacode.git"
+    "url": "https://github.com/44886/polacode.git"
   },
-  "publisher": "pnp",
+  "publisher": "44886",
   "keywords": [
     "polacode",
     "polaroid",
     "screenshot",
     "snippet",
-    "share"
+    "share",
+    "44886"
   ],
   "galleryBanner": {
     "color": "#fbfbfb",
@@ -35,7 +36,7 @@
     "commands": [
       {
         "command": "polacode.activate",
-        "title": "Polacode 📸"
+        "title": "Polacode📸-44886"
       }
     ],
     "configuration": {
@@ -48,14 +49,14 @@
         },
         "polacode.transparentBackground": {
           "type": "boolean",
-          "description": "Transparent background for containers",
+          "description": "背景色透明吗？",
           "default": false
         },
         "polacode.backgroundColor": {
           "type": "string",
-          "description": "Background color of snippet container. Use any value for CSS `background-color`",
+          "description": "背景颜色 `background-color`",
           "format": "color-hex",
-          "default": "#f2f2f2"
+          "default": "#fff"
         },
         "polacode.target": {
           "type": "string",

webview/index.html

@@ -1,52 +1,53 @@
 <html>
+
 <head>
-  <meta
-    http-equiv="Content-Security-Policy"
-    content="img-src vscode-resource: data: https:; script-src vscode-resource:; style-src 'unsafe-inline' vscode-resource:;"
-  />
+  <meta http-equiv="Content-Security-Policy"
+    content="img-src vscode-resource: data: https:; script-src vscode-resource:; style-src 'unsafe-inline' vscode-resource:;" />
   <style>
     html {
       box-sizing: border-box;
       padding-top: 32px;
     }
+
     body {
-      display: flex;
+      /* display: flex;
       flex-flow: column;
-      align-items: center;
+      align-items: center; */
+
     }
 
     #snippet-container {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      overflow: hidden;
-      resize: both;
-      background-color: #f2f2f2;
-      border-radius: 4px;
-      opacity: 0;
-      transition: opacity .4s;
       width: calc(100% - 4rem);
+      margin: 64px auto;
     }
+
+    .boy-box {
+      width: calc(100% - 8rem);
+      margin: 0px 4rem;
+      padding-top: 60px;
+      padding-bottom: 60px;
+    }
+
     #snippet {
       overflow: hidden;
       resize: both;
       display: flex;
-      padding: 18px;
-      margin-top: 64px;
-      margin-bottom: 64px;
+      padding: 20px;
       border-radius: 5px;
       box-shadow: rgba(0, 0, 0, 0.55) 0px 20px 68px;
-      width: calc(100% - 8rem);
+      padding-top:40px; 
     }
-    #snippet > div {
+
+    #snippet>div {
       display: flex;
       flex-flow: column nowrap;
       justify-content: center;
       max-width: 100%;
       white-space: pre-wrap !important;
       word-break: break-all;
     }
-    #snippet > div > div {
+
+    #snippet>div>div {
       display: flex;
       flex-wrap: wrap;
     }
@@ -56,42 +57,86 @@
       margin-bottom: 60px;
       text-align: center;
     }
+
     .obturateur {
       width: 64px;
       height: 64px;
     }
+
     .obturateur * {
       transition: stroke .4s;
     }
+
     .obturateur:not(.filling) path {
       opacity: .5;
     }
+
+    .window-controls {
+      margin-bottom: -30px;
+      margin-left: 15px;
+    }
+    #setting{
+      margin: 0px 4rem;
+    }
   </style>
 </head>
 
 <body>
+
+  <div id="setting">
+     控制按钮<input type="checkbox" name="" id="" checked onclick="change(this,'control')">
+     阴影<input type="checkbox" name="" id="" checked  onclick="change(this,'shadow')">
+     背景色<input type="text" name="" id="" value="#fff">
+
+
+  </div>
+
   <div id="snippet-container">
-    <div id="snippet" style="color: #d8dee9;background-color: #2e3440;font-family: SFMono-Regular,Consolas,DejaVu Sans Mono,Ubuntu Mono,Liberation Mono,Menlo,Courier,monospace;font-weight: normal;font-size: 12px;line-height: 18px;white-space: pre;"><meta charset="utf-8"><div style="color: #d8dee9;background-color: #2e3440;font-family: Input Mono;font-weight: normal;font-size: 12px;line-height: 18px;white-space: pre;"><div><span style="color: #8fbcbb;">console</span><span style="color: #eceff4;">.</span><span style="color: #88c0d0;">log</span><span style="color: #d8dee9;">(</span><span style="color: #eceff4;">'</span><span style="color: #a3be8c;">0. Run command `Polacode 📸 `</span><span style="color: #eceff4;">'</span><span style="color: #d8dee9;">)</span></div><div><span style="color: #8fbcbb;">console</span><span style="color: #eceff4;">.</span><span style="color: #88c0d0;">log</span><span style="color: #d8dee9;">(</span><span style="color: #eceff4;">'</span><span style="color: #a3be8c;">1. Copy some code</span><span style="color: #eceff4;">'</span><span style="color: #d8dee9;">)</span></div><div><span style="color: #8fbcbb;">console</span><span style="color: #eceff4;">.</span><span style="color: #88c0d0;">log</span><span style="color: #d8dee9;">(</span><span style="color: #eceff4;">'</span><span style="color: #a3be8c;">2. Paste into Polacode view</span><span style="color: #eceff4;">'</span><span style="color: #d8dee9;">)</span></div><div><span style="color: #8fbcbb;">console</span><span style="color: #eceff4;">.</span><span style="color: #88c0d0;">log</span><span style="color: #d8dee9;">(</span><span style="color: #eceff4;">'</span><span style="color: #a3be8c;">3. Click the button 📸 </span><span style="color: #eceff4;">'</span><span style="color: #d8dee9;">)</span></div></div></div>
+    <div class="boy-box">
+      <div id="control" class="window-controls">
+        <svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14">
+          <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
+            <circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle>
+            <circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle>
+            <circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle>
+          </g>
+        </svg>
+      </div>
+      <div id="snippet"
+        style="color: #d8dee9;background-color: #2e3440;font-family: SFMono-Regular,Consolas,DejaVu Sans Mono,Ubuntu Mono,Liberation Mono,Menlo,Courier,monospace;font-weight: normal;font-size: 12px;line-height: 18px;white-space: pre;">
+        <meta charset="utf-8">
+        <div
+          style="color: #d8dee9;background-color: #2e3440;font-family: Input Mono;font-weight: normal;font-size: 12px;line-height: 18px;white-space: pre;">
+          <p>两种方式：</p>
+          <p>1.点击本窗口，按Ctrl+V粘贴代码即可。</p>
+          <p>2.如果左边打开了代码窗口，在左边拖选代码，本窗口自动同步过来。</p>
+        </div>
+      </div>
+    </div>
   </div>
 
+
+
   <div id="save-container">
 
-    <svg id="save" class="obturateur" width="132px" height="132px" viewBox="0 0 132 132" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-      <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-          <g id="obturateur" transform="translate(2.000000, 2.000000)" stroke-width="3">
-              <circle id="Oval" stroke="#4C566A" cx="64" cy="64" r="64"></circle>
-              <circle id="Oval" stroke="#4C566A" cx="64" cy="64" r="60.9706667"></circle>
-              <circle id="Oval" stroke="#4C566A" cx="64" cy="64" r="51.8734222"></circle>
-              <circle id="Oval" stroke="#D8DEE9" cx="64" cy="64" r="28.2595556"></circle>
-              <path d="M17.0965333,86.1788444 L40.5667556,48.1998222" id="Shape" stroke="#EBCB8B"></path>
-              <path d="M15.1509333,46.5180444 L58.6026667,36.2574222" id="Shape" stroke="#A3BE8C"></path>
-              <path d="M41.8204444,17.0965333 L79.8001778,40.5660444" id="Shape" stroke="#8FBCBB"></path>
-              <path d="M81.4819556,15.1502222 L91.7425778,58.6019556" id="Shape" stroke="#88C0D0"></path>
-              <path d="M110.902756,41.8197333 L87.4332444,79.8001778" id="Shape" stroke="#81A1C1"></path>
-              <path d="M112.848356,81.4819556 L69.3973333,91.7418667" id="Shape" stroke="#B48EAD"></path>
-              <path d="M86.1795556,110.902756 L48.1998222,87.4332444" id="Shape" stroke="#BF616A"></path>
-              <path d="M46.5187556,112.848356 L36.2574222,69.3973333" id="Shape" stroke="#D08770"></path>
-          </g>
+    <svg id="save" class="obturateur" width="132px" height="132px" viewBox="0 0 132 132" version="1.1"
+      xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"
+        stroke-linejoin="round">
+        <g id="obturateur" transform="translate(2.000000, 2.000000)" stroke-width="3">
+          <circle id="Oval" stroke="#4C566A" cx="64" cy="64" r="64"></circle>
+          <circle id="Oval" stroke="#4C566A" cx="64" cy="64" r="60.9706667"></circle>
+          <circle id="Oval" stroke="#4C566A" cx="64" cy="64" r="51.8734222"></circle>
+          <circle id="Oval" stroke="#D8DEE9" cx="64" cy="64" r="28.2595556"></circle>
+          <path d="M17.0965333,86.1788444 L40.5667556,48.1998222" id="Shape" stroke="#EBCB8B"></path>
+          <path d="M15.1509333,46.5180444 L58.6026667,36.2574222" id="Shape" stroke="#A3BE8C"></path>
+          <path d="M41.8204444,17.0965333 L79.8001778,40.5660444" id="Shape" stroke="#8FBCBB"></path>
+          <path d="M81.4819556,15.1502222 L91.7425778,58.6019556" id="Shape" stroke="#88C0D0"></path>
+          <path d="M110.902756,41.8197333 L87.4332444,79.8001778" id="Shape" stroke="#81A1C1"></path>
+          <path d="M112.848356,81.4819556 L69.3973333,91.7418667" id="Shape" stroke="#B48EAD"></path>
+          <path d="M86.1795556,110.902756 L48.1998222,87.4332444" id="Shape" stroke="#BF616A"></path>
+          <path d="M46.5187556,112.848356 L36.2574222,69.3973333" id="Shape" stroke="#D08770"></path>
+        </g>
       </g>
     </svg>
   </div>
@@ -100,4 +145,5 @@
   <script src="./vivus.js"></script>
   <script src="./index.js"></script>
 </body>
+
 </html>

webview/index.js

@@ -1,4 +1,4 @@
-;(function() {
+; (function () {
   const vscode = acquireVsCodeApi()
 
   let target = 'container'
@@ -12,6 +12,7 @@
   const snippetNode = document.getElementById('snippet')
   const snippetContainerNode = document.getElementById('snippet-container')
   const obturateur = document.getElementById('save')
+  const contrl = `<div>11</div><div class="window-controls">    <svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14">      <g fill="none" fill-rule="evenodd" transform="translate(1 1)">        <circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle>        <circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle>        <circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle>      </g>    </svg></div><div>22</div>`
 
   snippetContainerNode.style.opacity = '1'
   const oldState = vscode.getState();
@@ -22,7 +23,7 @@
   const getInitialHtml = fontFamily => {
     const cameraWithFlashEmoji = String.fromCodePoint(128248)
     const monoFontStack = `${fontFamily},SFMono-Regular,Consolas,DejaVu Sans Mono,Ubuntu Mono,Liberation Mono,Menlo,Courier,monospace`
-    return `<meta charset="utf-8"><div style="color: #d8dee9;background-color: #2e3440; font-family: ${monoFontStack};font-weight: normal;font-size: 12px;line-height: 18px;white-space: pre;"><div><span style="color: #8fbcbb;">console</span><span style="color: #eceff4;">.</span><span style="color: #88c0d0;">log</span><span style="color: #d8dee9;">(</span><span style="color: #eceff4;">'</span><span style="color: #a3be8c;">0. Run command \`Polacode ${cameraWithFlashEmoji}\`</span><span style="color: #eceff4;">'</span><span style="color: #d8dee9;">)</span></div><div><span style="color: #8fbcbb;">console</span><span style="color: #eceff4;">.</span><span style="color: #88c0d0;">log</span><span style="color: #d8dee9;">(</span><span style="color: #eceff4;">'</span><span style="color: #a3be8c;">1. Copy some code</span><span style="color: #eceff4;">'</span><span style="color: #d8dee9;">)</span></div><div><span style="color: #8fbcbb;">console</span><span style="color: #eceff4;">.</span><span style="color: #88c0d0;">log</span><span style="color: #d8dee9;">(</span><span style="color: #eceff4;">'</span><span style="color: #a3be8c;">2. Paste into Polacode view</span><span style="color: #eceff4;">'</span><span style="color: #d8dee9;">)</span></div><div><span style="color: #8fbcbb;">console</span><span style="color: #eceff4;">.</span><span style="color: #88c0d0;">log</span><span style="color: #d8dee9;">(</span><span style="color: #eceff4;">'</span><span style="color: #a3be8c;">3. Click the button ${cameraWithFlashEmoji}</span><span style="color: #eceff4;">'</span><span style="color: #d8dee9;">)</span></div></div></div>`
+    return `<meta charset="utf-8"><div style="color: #d8dee9;background-color: #2e3440; font-family: ${monoFontStack};font-weight: normal;font-size: 12px;line-height: 18px;white-space: pre;"><p>两种方式：</p>    <p>1.点击本窗口，按Ctrl+V粘贴代码即可。</p>    <p>2.如果左边打开了代码窗口，在左边拖选代码，本窗口自动同步过来。</p></div>`
   }
 
   const serializeBlob = (blob, cb) => {
@@ -129,21 +130,22 @@
 
   obturateur.addEventListener('click', () => {
     if (target === 'container') {
-      shootAll() 
+      shootAll()
     } else {
       shootSnippet()
     }
   })
 
   function shootAll() {
+    console.log(snippetContainerNode.offsetWidth);
     const width = snippetContainerNode.offsetWidth * 2
     const height = snippetContainerNode.offsetHeight * 2
     const config = {
       width,
       height,
       style: {
         transform: 'scale(2)',
-        'transform-origin': 'center',
+        'transform-origin': '0% 0%',
         background: getRgba(backgroundColor, transparentBackground)
       }
     }
@@ -259,4 +261,12 @@ function getRgba(hex, transparentBackground) {
   const b = bigint & 255;
   const a = transparentBackground ? 0 : 1
   return `rgba(${r}, ${g}, ${b}, ${a})`
+}
+
+function change(dom,key){
+  console.log(dom);
+
+  if(key=="control"){
+    document.getElementById("control").style.display="none";
+  }
 }