Skip to content

Commit f2ada80

Browse files
authored
Merge pull request #105 from octref/rewrite
Rewrite
2 parents d644a4f + 4ed992a commit f2ada80

File tree

13 files changed

+469
-6518
lines changed

13 files changed

+469
-6518
lines changed

README.md

Lines changed: 9 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
1-
# Polacode
1+
<p>
2+
<h2 align="center">Polacode — Polaroid for your code 📸</h2>
3+
</p>
24

3-
Polaroid for your code 📸.
4-
5-
[MarketPlace Page](https://marketplace.visualstudio.com/items?itemName=pnp.polacode)
6-
7-
![usage](https://github.com/octref/polacode/raw/master/demo/usage.gif)
8-
9-
By [Pine](https://github.com/octref) & [Peng](https://github.com/rebornix) from VS Code team.
10-
Happy Coding!
5+
<!-- ![usage](https://github.com/octref/polacode/raw/master/demo/usage.gif) -->
6+
![usage](./demo/usage.gif)
117

128
## Why?
139

@@ -18,11 +14,10 @@ You shell out $200 for [italic cursive html attributes](https://www.typography.c
1814

1915
The code has to look right.
2016

21-
## Seriously, why not just take a screenshot?
17+
## Tips
2218

23-
- I like and care about the shadow, padding & rounded corner of macOS's screenshot. I want an easy way to have those nice visuals for any selection of my snippet.
24-
- I want to hide errors, warnings, color decorators, folding markers, line numbers, scrollbar and minimap.
25-
- It generates something decent on Windows & Linux.
19+
- Resize the snippet / container by dragging the lowerright corner
20+
- Use `polacode.target`, `polacode.shadow`, `polacode.transparentBackground` and `polacode.backgroundColor` to control image appearance
2621

2722
## Demo
2823

@@ -38,10 +33,6 @@ The code has to look right.
3833

3934
![demo3](https://raw.githubusercontent.com/octref/polacode/master/demo/3.png)
4035

41-
## Tip
42-
43-
- When running out of horizontal space, try the command `View: Toggle Editor Group Vertical/Horizontal Layout`.
44-
4536
## Credit
4637

4738
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.
@@ -54,7 +45,7 @@ Download button animation is made with [Vivus](https://github.com/maxwellito/viv
5445

5546
## Contribution
5647

57-
Contribution is extremely unwelcome.
48+
Contribution is not very welcome.
5849
Please open an issue first so I can stop you from complicating the UX.
5950

6051
## License

demo/usage.gif

2.2 MB
Loading

jsconfig.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es2015",
4+
"module": "commonjs",
5+
"moduleResolution": "node"
6+
}
7+
}

package.json

Lines changed: 47 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,18 +20,61 @@
2020
"theme": "light"
2121
},
2222
"icon": "icon.png",
23-
"categories": ["Other"],
23+
"categories": [
24+
"Other"
25+
],
2426
"engines": {
25-
"vscode": "^1.19.0"
27+
"vscode": "^1.32.0"
2628
},
27-
"activationEvents": ["onCommand:polacode.activate"],
29+
"activationEvents": [
30+
"onCommand:polacode.activate",
31+
"onWebviewPanel:polacode"
32+
],
2833
"main": "./src/extension",
2934
"contributes": {
3035
"commands": [
3136
{
3237
"command": "polacode.activate",
3338
"title": "Polacode 📸"
3439
}
35-
]
40+
],
41+
"configuration": {
42+
"title": "Polacode",
43+
"properties": {
44+
"polacode.shadow": {
45+
"type": "string",
46+
"description": "Shadow of the snippet node. Use any value for CSS `box-shadow`",
47+
"default": "rgba(0, 0, 0, 0.55) 0px 20px 68px"
48+
},
49+
"polacode.transparentBackground": {
50+
"type": "boolean",
51+
"description": "Transparent background for containers",
52+
"default": false
53+
},
54+
"polacode.backgroundColor": {
55+
"type": "string",
56+
"description": "Background color of snippet container. Use any value for CSS `background-color`",
57+
"format": "color-hex",
58+
"default": "#f2f2f2"
59+
},
60+
"polacode.target": {
61+
"type": "string",
62+
"description": "Shoot with or without container",
63+
"default": "container",
64+
"enum": [
65+
"container",
66+
"snippet"
67+
],
68+
"enumDescriptions": [
69+
"Shoot with the container.",
70+
"Shoot with the snippet alone. If you want transparent padding, use `container` with `\"polacode.transparentBackground\": true`"
71+
]
72+
}
73+
}
74+
}
75+
},
76+
"devDependencies": {
77+
"@types/node": "^11.12.0",
78+
"@types/vscode": "^1.32.0"
3679
}
3780
}

src/extension.js

Lines changed: 112 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,135 @@
11
const vscode = require('vscode')
2+
const fs = require('fs')
23
const path = require('path')
3-
const { writeFileSync } = require('fs')
44
const { homedir } = require('os')
55

66
const writeSerializedBlobToFile = (serializeBlob, fileName) => {
77
const bytes = new Uint8Array(serializeBlob.split(','))
8-
writeFileSync(fileName, new Buffer(bytes))
8+
fs.writeFileSync(fileName, Buffer.from(bytes))
99
}
1010

11+
const P_TITLE = 'Polacode 📸'
12+
13+
/**
14+
* @param {vscode.ExtensionContext} context
15+
*/
1116
function activate(context) {
12-
const htmlPath = path.resolve(context.extensionPath, 'src/webview/index.html')
13-
const indexUri = vscode.Uri.file(htmlPath)
17+
const htmlPath = path.resolve(context.extensionPath, 'webview/index.html')
1418

1519
let lastUsedImageUri = vscode.Uri.file(path.resolve(homedir(), 'Desktop/code.png'))
16-
vscode.commands.registerCommand('polacode.shoot', serializedBlob => {
17-
vscode.window
18-
.showSaveDialog({
19-
defaultUri: lastUsedImageUri,
20-
filters: {
21-
Images: ['png']
22-
}
23-
})
24-
.then(uri => {
25-
if (uri) {
26-
writeSerializedBlobToFile(serializedBlob, uri.fsPath)
27-
lastUsedImageUri = uri
28-
}
20+
let panel
21+
22+
vscode.window.registerWebviewPanelSerializer('polacode', {
23+
async deserializeWebviewPanel(_panel, state) {
24+
panel = _panel
25+
panel.webview.html = getHtmlContent(htmlPath)
26+
panel.webview.postMessage({
27+
type: 'restore',
28+
innerHTML: state.innerHTML,
29+
bgColor: context.globalState.get('polacode.bgColor', '#2e3440')
2930
})
31+
setupSelectionSync()
32+
setupMessageListeners()
33+
}
3034
})
3135

3236
vscode.commands.registerCommand('polacode.activate', () => {
33-
vscode.commands
34-
.executeCommand('vscode.previewHtml', indexUri, 2, 'Polacode 📸', {
35-
allowScripts: true
36-
})
37-
.then(() => {
38-
const fontFamily = vscode.workspace.getConfiguration('editor').fontFamily
39-
const bgColor = context.globalState.get('polacode.bgColor', '#2e3440')
40-
vscode.commands.executeCommand('_workbench.htmlPreview.postMessage', indexUri, {
41-
type: 'init',
42-
fontFamily,
43-
bgColor
44-
})
45-
})
37+
panel = vscode.window.createWebviewPanel('polacode', P_TITLE, 2, {
38+
enableScripts: true,
39+
localResourceRoots: [vscode.Uri.file(path.join(context.extensionPath, 'webview'))]
40+
})
41+
42+
panel.webview.html = getHtmlContent(htmlPath)
43+
44+
setupMessageListeners()
45+
46+
const fontFamily = vscode.workspace.getConfiguration('editor').fontFamily
47+
const bgColor = context.globalState.get('polacode.bgColor', '#2e3440')
48+
panel.webview.postMessage({
49+
type: 'init',
50+
fontFamily,
51+
bgColor
52+
})
53+
54+
syncSettings()
4655
})
4756

48-
vscode.window.onDidChangeTextEditorSelection(e => {
49-
if (e.selections[0] && !e.selections[0].isEmpty) {
50-
vscode.commands.executeCommand('editor.action.clipboardCopyAction')
51-
vscode.commands.executeCommand('_workbench.htmlPreview.postMessage', indexUri, {
52-
type: 'update'
53-
})
57+
vscode.workspace.onDidChangeConfiguration(e => {
58+
if (e.affectsConfiguration('polacode') || e.affectsConfiguration('editor')) {
59+
syncSettings()
5460
}
5561
})
5662

57-
vscode.commands.registerCommand('polacode._onmessage', ({ type, data }) => {
58-
if (type === 'updateBgColor') {
59-
context.globalState.update('polacode.bgColor', data.bgColor)
60-
} else if (type === 'invalidPasteContent') {
61-
vscode.window.showInformationMessage(
62-
'Pasted content is invalid. Only copy from VS Code and check if your shortcuts for copy/paste have conflicts.'
63-
)
64-
}
63+
setupSelectionSync()
64+
65+
function setupMessageListeners() {
66+
panel.webview.onDidReceiveMessage(({ type, data }) => {
67+
switch (type) {
68+
case 'shoot':
69+
vscode.window
70+
.showSaveDialog({
71+
defaultUri: lastUsedImageUri,
72+
filters: {
73+
Images: ['png']
74+
}
75+
})
76+
.then(uri => {
77+
if (uri) {
78+
writeSerializedBlobToFile(data.serializedBlob, uri.fsPath)
79+
lastUsedImageUri = uri
80+
}
81+
})
82+
break
83+
case 'getAndUpdateCacheAndSettings':
84+
panel.webview.postMessage({
85+
type: 'restoreBgColor',
86+
bgColor: context.globalState.get('polacode.bgColor', '#2e3440')
87+
})
88+
89+
syncSettings()
90+
break
91+
case 'updateBgColor':
92+
context.globalState.update('polacode.bgColor', data.bgColor)
93+
break
94+
case 'invalidPasteContent':
95+
vscode.window.showInformationMessage(
96+
'Pasted content is invalid. Only copy from VS Code and check if your shortcuts for copy/paste have conflicts.'
97+
)
98+
break
99+
}
100+
})
101+
}
102+
103+
function syncSettings() {
104+
const settings = vscode.workspace.getConfiguration('polacode')
105+
const editorSettings = vscode.workspace.getConfiguration('editor')
106+
panel.webview.postMessage({
107+
type: 'updateSettings',
108+
shadow: settings.get('shadow'),
109+
transparentBackground: settings.get('transparentBackground'),
110+
backgroundColor: settings.get('backgroundColor'),
111+
target: settings.get('target'),
112+
ligature: editorSettings.get('fontLigatures')
113+
})
114+
}
115+
116+
function setupSelectionSync() {
117+
vscode.window.onDidChangeTextEditorSelection(e => {
118+
if (e.selections[0] && !e.selections[0].isEmpty) {
119+
vscode.commands.executeCommand('editor.action.clipboardCopyAction')
120+
panel.postMessage({
121+
type: 'update'
122+
})
123+
}
124+
})
125+
}
126+
}
127+
128+
function getHtmlContent(htmlPath) {
129+
const htmlContent = fs.readFileSync(htmlPath, 'utf-8')
130+
return htmlContent.replace(/script src="([^"]*)"/g, (match, src) => {
131+
const realSource = 'vscode-resource:' + path.resolve(htmlPath, '..', src)
132+
return `script src="${realSource}"`
65133
})
66134
}
67135

0 commit comments

Comments
 (0)