mirror of
https://github.com/microsoft/vscode-extension-samples.git
synced 2026-04-27 16:55:44 +08:00
Add binary custom editor example
This commit is contained in:
Matt Bierner
@ -1,8 +1,11 @@
|
||||
# Cat Customs - Custom Editor API Samples
|
||||
|
||||
Demonstrates using VS Code's [custom editor API](https://code.visualstudio.com/api/extension-guides/custom-editors):
|
||||
|
||||
|
||||
- Cat Scratch — A text based custom editor for `.cscratch` files (which are just json files)
|
||||
Demonstrates VS Code's [custom editor API](https://code.visualstudio.com/api/extension-guides/custom-editors) using two custom editors:
|
||||
|
||||
- Cat Scratch — Uses the finalized custom text editor api to provide a custom editor for `.cscratch` files (which are just json files)
|
||||
- Paw Draw - Uses the proposed binary custom editor api to provide a custom editor for `.pawdraw` files (which are just jpeg files with a different file extension). Note that this requires VS Code 1.46+
|
||||
|
||||
## VS Code API
|
||||
|
||||
@ -10,10 +13,11 @@ Demonstrates using VS Code's [custom editor API](https://code.visualstudio.com/a
|
||||
|
||||
- [`window.registerCustomEditorProvider`](https://code.visualstudio.com/api/references/vscode-api#window.registerCustomEditorProvider)
|
||||
- [`CustomTextEditor`](https://code.visualstudio.com/api/references/vscode-api#CustomTextEditor)
|
||||
- [`CustomEditor`](https://code.visualstudio.com/api/references/vscode-api#CustomEditor)
|
||||
|
||||
## Running the example
|
||||
|
||||
- Open this example in VS Code 1.44+
|
||||
- Open this example in VS Code 1.44+ (note that the custom binary editor requires VS Code 1.45+)
|
||||
- `npm install`
|
||||
- `npm run watch` or `npm run compile`
|
||||
- `F5` to start debugging
|
||||
|
||||
BIN
custom-editor-sample/documentation/example.png
Normal file
BIN
custom-editor-sample/documentation/example.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 225 KiB |
BIN
custom-editor-sample/exampleFiles/example.pawDraw
Normal file
BIN
custom-editor-sample/exampleFiles/example.pawDraw
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
21
custom-editor-sample/media/paw-color.svg
Normal file
21
custom-editor-sample/media/paw-color.svg
Normal file
@ -0,0 +1,21 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 40 50" style="enable-background:new 0 0 40 50;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
</style>
|
||||
<g class="st0">
|
||||
<g>
|
||||
<path d="M16.5,2.2c-1.4,0-2.6,0.5-3.8,1.2c-0.2-0.9-0.1-1.7,0.4-2.5c0.2-0.4,0.7-0.4,1.1-0.1C15,1.3,15.7,1.8,16.5,2.2z"/>
|
||||
<path d="M6.5,10c-0.9,0.4-1.5,1.2-2.3,1.8C4,11,3.7,10.3,3.6,9.6s0.2-1,1-0.8C5.3,9.1,5.9,9.5,6.5,10z"/>
|
||||
<path d="M29.2,3.4c-0.8-0.3-1.6-0.5-2.5-0.8c0-0.1,0.1-0.1,0.1-0.2c0.6-0.5,1.2-1.6,1.9-1.3C29.6,1.5,29.1,2.6,29.2,3.4z"/>
|
||||
<path d="M36.2,11.9c-0.3-0.6-0.7-1.2-1-1.7c0.5-0.4,1-1.1,1.6-0.7c0.7,0.5-0.1,1.1-0.2,1.7C36.5,11.4,36.3,11.6,36.2,11.9z"/>
|
||||
<path d="M21.1,15.1c3.1,0.1,5.2,1.8,6.4,4.5c0.3,0.7,0.5,1.4,0.7,2.1c0.8,3.2-1.8,5.8-5,4.9c-1.4-0.4-2.7-0.6-4.1-0.3
|
||||
c-0.9,0.2-1.7,0.1-2.6-0.3c-3.3-1.3-4.1-4-2-6.9c1.3-1.7,2.7-3.2,4.9-3.9C20,15.2,20.5,15.1,21.1,15.1z"/>
|
||||
<path d="M15.6,15.6c0,1.9-1.6,3.5-3.5,3.5c-1.7,0-3.2-1.4-3.2-2.9c0-2.2,1.6-4,3.6-4C14.2,12.2,15.6,13.8,15.6,15.6z"/>
|
||||
<path d="M17.7,13.1c-2,0-3.2-1-3.2-2.8c0-2.6,0.9-3.8,3-3.8c2,0,3.5,1.4,3.5,3.3C21.1,11.9,19.9,13.1,17.7,13.1z"/>
|
||||
<path d="M27.8,10.6c0,1.8-1.2,3-3.1,3c-1.6,0-2.9-1.7-2.9-3.7c0-1.7,1.1-2.8,2.8-2.8C26.6,7.1,27.8,8.4,27.8,10.6z"/>
|
||||
<path d="M32.5,16c0,1.7-1.1,2.9-2.6,2.8c-1.6-0.1-3-1.5-2.9-3.2c0-1.7,1.1-2.7,2.8-2.7C31.6,13,32.6,14.1,32.5,16z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
21
custom-editor-sample/media/paw-outline.svg
Normal file
21
custom-editor-sample/media/paw-outline.svg
Normal file
@ -0,0 +1,21 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 40 50" style="enable-background:new 0 0 40 50;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
</style>
|
||||
<g class="st0">
|
||||
<path d="M6.5,10c0.9-0.4,1.8-0.5,2.8-0.5c0.8,0,1.1-0.2,1-1c-0.2-2.2,0.8-3.8,2.4-5c1.2-0.8,2.4-1.2,3.8-1.2c1.6-0.1,3,0.5,4.2,1.5
|
||||
c0.5,0.5,0.9,0.4,1.5,0c1.3-1,2.9-1,4.5-1.1c0.8,0.3,1.6,0.5,2.5,0.8c1.4,1,2.2,2.3,2.4,4c0.1,0.5,0.2,0.7,0.7,0.9
|
||||
c1.2,0.3,2,1.1,3,1.8c0.3,0.6,0.7,1.2,1,1.7c0.6,2.5,1.1,4.9,0.1,7.4c-0.5,1.2-1.2,2.2-2.5,2.8c-0.7,0.3-1,0.8-1.2,1.5
|
||||
c-0.5,2.1-1.3,4-1.7,6.1c-0.1,0.7-0.4,1.4-1,1.9c-1.1,1-1.4,2.4-1.4,3.8c-0.2,4.7,6.7,10.8-2.2,13.5c-5.8,0-13.6,0.9-15.1-2.2
|
||||
c-1.7-3.7,0-4.7,0-8.8c0-2.2-0.3-4.3-1.9-6.1c-0.8-0.9-0.9-2.2-0.9-3.4c0-1.1-0.4-1.8-1.1-2.5C4.7,23.2,3.5,20,3,16.4
|
||||
c-0.2-1.7,0.2-3.2,1.1-4.6C5,11.2,5.6,10.4,6.5,10z M21.1,15.1c-0.6,0-1.1,0.1-1.6,0.2c-2.1,0.6-3.6,2.1-4.9,3.9
|
||||
c-2.1,2.8-1.3,5.6,2,6.9c0.8,0.3,1.7,0.4,2.6,0.3c1.4-0.2,2.7-0.1,4.1,0.3c3.2,0.9,5.8-1.6,5-4.9c-0.2-0.7-0.4-1.5-0.7-2.1
|
||||
C26.2,16.9,24.2,15.2,21.1,15.1z M15.6,15.6c0-1.8-1.4-3.4-3.1-3.5c-2,0-3.6,1.8-3.6,4c0,1.6,1.5,2.9,3.2,2.9
|
||||
C14,19.1,15.5,17.6,15.6,15.6z M17.7,13.1c2.1,0,3.3-1.2,3.3-3.4c0-1.9-1.5-3.3-3.5-3.3c-2.1,0-3,1.2-3,3.8
|
||||
C14.6,12.1,15.7,13.1,17.7,13.1z M27.8,10.6c0-2.1-1.2-3.4-3.2-3.4c-1.7,0-2.7,1-2.8,2.8c0,2.1,1.3,3.7,2.9,3.7
|
||||
C26.5,13.6,27.8,12.4,27.8,10.6z M32.5,16c0-1.9-1-3-2.7-3.1c-1.7,0-2.8,1-2.8,2.7c0,1.6,1.3,3.1,2.9,3.2
|
||||
C31.4,18.9,32.5,17.7,32.5,16z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
79
custom-editor-sample/media/pawDraw.css
Normal file
79
custom-editor-sample/media/pawDraw.css
Normal file
@ -0,0 +1,79 @@
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.drawing-canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-repeat: repeat;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.drawing-controls {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.drawing-controls button {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: none;
|
||||
border: none;
|
||||
transform: translateY(30%);
|
||||
transition: transform 0.1s linear;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.drawing-controls button.active,
|
||||
.drawing-controls button:hover {
|
||||
transform: translateY(10%);
|
||||
}
|
||||
|
||||
.drawing-controls button:before,
|
||||
.drawing-controls button:after {
|
||||
display: block;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.drawing-controls button:before {
|
||||
-webkit-mask: url("./paw-color.svg") no-repeat 50% 50%;
|
||||
}
|
||||
|
||||
.drawing-controls button:after {
|
||||
background-color: #111;
|
||||
-webkit-mask: url("./paw-outline.svg") no-repeat 50% 50%;
|
||||
}
|
||||
|
||||
.drawing-controls button.black:before {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.drawing-controls button.white:before {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.drawing-controls button.red:before {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.drawing-controls button.green:before {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.drawing-controls button.blue:before {
|
||||
background-color: blue;
|
||||
}
|
||||
231
custom-editor-sample/media/pawDraw.js
Normal file
231
custom-editor-sample/media/pawDraw.js
Normal file
@ -0,0 +1,231 @@
|
||||
// @ts-check
|
||||
|
||||
// This script is run within the webview itself
|
||||
(function () {
|
||||
// @ts-ignore
|
||||
const vscode = acquireVsCodeApi();
|
||||
|
||||
/**
|
||||
* A drawn line.
|
||||
*/
|
||||
class Stroke {
|
||||
constructor(/** @type {string} */ color, /** @type {Array<[number, number]> | undefined} */ stroke) {
|
||||
this.color = color;
|
||||
/** @type {Array<[number, number]>} */
|
||||
this.stroke = stroke || [];
|
||||
}
|
||||
|
||||
addPoint(/** @type {number} */ x, /** @type {number} */ y) {
|
||||
this.stroke.push([x, y])
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Uint8Array} initialContent
|
||||
* @return {Promise<HTMLImageElement>}
|
||||
*/
|
||||
async function loadImageFromData(initialContent) {
|
||||
const blob = new Blob([initialContent], { 'type': 'image/png' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
try {
|
||||
const img = document.createElement('img');
|
||||
img.crossOrigin = 'anonymous';
|
||||
img.src = url;
|
||||
await new Promise((resolve, reject) => {
|
||||
img.onload = resolve;
|
||||
img.onerror = reject;
|
||||
});
|
||||
return img;
|
||||
} finally {
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
}
|
||||
|
||||
class PawDrawEditor {
|
||||
constructor( /** @type {HTMLElement} */ parent) {
|
||||
this.ready = false;
|
||||
|
||||
this.drawingColor = 'black';
|
||||
|
||||
/** @type {Array<Stroke>} */
|
||||
this.strokes = [];
|
||||
|
||||
/** @type {Stroke | undefined} */
|
||||
this.currentStroke = undefined;
|
||||
|
||||
this._initElements(parent);
|
||||
}
|
||||
|
||||
addPoint(/** @type {number} */ x, /** @type {number} */ y) {
|
||||
if (this.currentStroke) {
|
||||
this.currentStroke.addPoint(x, y)
|
||||
}
|
||||
}
|
||||
|
||||
beginStoke(/** @type {string} */ color) {
|
||||
this.currentStroke = new Stroke(color);
|
||||
this.strokes.push(this.currentStroke);
|
||||
}
|
||||
|
||||
endStroke() {
|
||||
const previous = this.currentStroke;
|
||||
this.currentStroke = undefined;
|
||||
return previous;
|
||||
}
|
||||
|
||||
_initElements(/** @type {HTMLElement} */ parent) {
|
||||
const colorButtons = /** @type {NodeListOf<HTMLButtonElement>} */ (document.querySelectorAll('.drawing-controls button'));
|
||||
for (const colorButton of colorButtons) {
|
||||
colorButton.addEventListener('click', e => {
|
||||
e.stopPropagation();
|
||||
colorButtons.forEach(button => button.classList.remove('active'));
|
||||
colorButton.classList.add('active');
|
||||
this.drawingColor = colorButton.dataset['color'];
|
||||
});
|
||||
}
|
||||
|
||||
this.wrapper = document.createElement('div');
|
||||
this.wrapper.style.position = 'relative';
|
||||
parent.append(this.wrapper);
|
||||
|
||||
this.initialCanvas = document.createElement('canvas');
|
||||
this.initialCtx = this.initialCanvas.getContext('2d');
|
||||
this.wrapper.append(this.initialCanvas);
|
||||
|
||||
this.drawingCanvas = document.createElement('canvas');
|
||||
this.drawingCanvas.style.position = 'absolute';
|
||||
this.drawingCanvas.style.top = '0';
|
||||
this.drawingCanvas.style.left = '0';
|
||||
this.drawingCtx = this.drawingCanvas.getContext('2d');
|
||||
this.wrapper.append(this.drawingCanvas);
|
||||
|
||||
let isDrawing = false
|
||||
|
||||
parent.addEventListener('mousedown', () => {
|
||||
if (!this.ready) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.beginStoke(this.drawingColor);
|
||||
this.drawingCtx.strokeStyle = this.drawingColor;
|
||||
|
||||
isDrawing = true;
|
||||
document.body.classList.add('isDrawing');
|
||||
this.drawingCtx.beginPath();
|
||||
});
|
||||
|
||||
document.body.addEventListener('mouseup', async () => {
|
||||
if (!isDrawing || !this.ready) {
|
||||
return;
|
||||
}
|
||||
|
||||
isDrawing = false;
|
||||
document.body.classList.remove('isDrawing');
|
||||
this.drawingCtx.closePath();
|
||||
|
||||
const edit = this.endStroke();
|
||||
|
||||
if (edit.stroke.length) {
|
||||
vscode.postMessage({
|
||||
type: 'stroke',
|
||||
color: edit.color,
|
||||
stroke: edit.stroke,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
parent.addEventListener('mousemove', e => {
|
||||
if (!isDrawing || !this.ready) {
|
||||
return;
|
||||
}
|
||||
const rect = this.wrapper.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const y = e.clientY - rect.top;
|
||||
this.drawingCtx.lineTo(x, y);
|
||||
this.drawingCtx.stroke();
|
||||
this.addPoint(x, y);
|
||||
});
|
||||
}
|
||||
|
||||
_redraw() {
|
||||
this.drawingCtx.clearRect(0, 0, this.drawingCanvas.width, this.drawingCanvas.height);
|
||||
for (const stroke of this.strokes) {
|
||||
this.drawingCtx.strokeStyle = stroke.color;
|
||||
this.drawingCtx.beginPath();
|
||||
for (const [x, y] of stroke.stroke) {
|
||||
this.drawingCtx.lineTo(x, y);
|
||||
}
|
||||
this.drawingCtx.stroke();
|
||||
this.drawingCtx.closePath();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Uint8Array | undefined} data
|
||||
* @param {Array<Stroke> | undefined} strokes
|
||||
*/
|
||||
async reset(data, strokes = []) {
|
||||
if (data) {
|
||||
const img = await loadImageFromData(data);
|
||||
this.initialCanvas.width = this.drawingCanvas.width = img.naturalWidth;
|
||||
this.initialCanvas.height = this.drawingCanvas.height = img.naturalHeight;
|
||||
this.initialCtx.drawImage(img, 0, 0);
|
||||
this.ready = true;
|
||||
}
|
||||
|
||||
this.strokes = strokes;
|
||||
this._redraw();
|
||||
}
|
||||
|
||||
/** @return {Promise<Uint8Array>} */
|
||||
async getImageData() {
|
||||
const outCanvas = document.createElement('canvas');
|
||||
outCanvas.width = this.drawingCanvas.width;
|
||||
outCanvas.height = this.drawingCanvas.height;
|
||||
|
||||
const outCtx = outCanvas.getContext('2d');
|
||||
outCtx.drawImage(this.initialCanvas, 0, 0);
|
||||
outCtx.drawImage(this.drawingCanvas, 0, 0);
|
||||
|
||||
const blob = await new Promise(resolve => {
|
||||
outCanvas.toBlob(resolve, 'image/jpeg')
|
||||
});
|
||||
|
||||
return new Uint8Array(await blob.arrayBuffer());
|
||||
}
|
||||
}
|
||||
|
||||
const editor = new PawDrawEditor(document.querySelector('.drawing-canvas'));
|
||||
|
||||
// Handle messages from the extension
|
||||
window.addEventListener('message', async e => {
|
||||
const { type, body, requestId } = e.data;
|
||||
switch (type) {
|
||||
case 'init':
|
||||
{
|
||||
// Load the initial image into the canvas.
|
||||
const data = new Uint8Array(body.value.data);
|
||||
await editor.reset(data);
|
||||
return;
|
||||
}
|
||||
case 'update':
|
||||
{
|
||||
const data = body.content ? new Uint8Array(body.content.data) : undefined;;
|
||||
const strokes = body.edits.map(edit => new Stroke(edit.color, edit.stroke));
|
||||
await editor.reset(data, strokes)
|
||||
return;
|
||||
}
|
||||
case 'getFileData':
|
||||
{
|
||||
// Get the image data for the canvas and post it back to the extension.
|
||||
editor.getImageData().then(data => {
|
||||
vscode.postMessage({ type: 'response', requestId, body: data });
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Signal to VS Code that the webview is initialized.
|
||||
vscode.postMessage({ type: 'ready' });
|
||||
}());
|
||||
@ -12,7 +12,8 @@
|
||||
"Other"
|
||||
],
|
||||
"activationEvents": [
|
||||
"onCustomEditor:catCustoms.catScratch"
|
||||
"onCustomEditor:catCustoms.catScratch",
|
||||
"onCustomEditor:catCustoms.pawDraw"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@ -29,6 +30,15 @@
|
||||
"filenamePattern": "*.cscratch"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"viewType": "catCustoms.pawDraw",
|
||||
"displayName": "Paw Draw",
|
||||
"selector": [
|
||||
{
|
||||
"filenamePattern": "*.pawdraw"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
37
custom-editor-sample/src/dispose.ts
Normal file
37
custom-editor-sample/src/dispose.ts
Normal file
@ -0,0 +1,37 @@
|
||||
import * as vscode from 'vscode';
|
||||
|
||||
export function disposeAll(disposables: vscode.Disposable[]) {
|
||||
while (disposables.length) {
|
||||
const item = disposables.pop();
|
||||
if (item) {
|
||||
item.dispose();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export abstract class Disposable {
|
||||
private _isDisposed = false;
|
||||
|
||||
protected _disposables: vscode.Disposable[] = [];
|
||||
|
||||
public dispose(): any {
|
||||
if (this._isDisposed) {
|
||||
return;
|
||||
}
|
||||
this._isDisposed = true;
|
||||
disposeAll(this._disposables);
|
||||
}
|
||||
|
||||
protected _register<T extends vscode.Disposable>(value: T): T {
|
||||
if (this._isDisposed) {
|
||||
value.dispose();
|
||||
} else {
|
||||
this._disposables.push(value);
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
protected get isDisposed() {
|
||||
return this._isDisposed;
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,12 @@
|
||||
import * as vscode from 'vscode';
|
||||
import { CatScratchEditorProvider } from './catScratchEditor';
|
||||
import { PawDrawEditorProvider } from './pawDrawEditor';
|
||||
|
||||
export function activate(context: vscode.ExtensionContext) {
|
||||
// Register our custom editor provider
|
||||
// Register our custom editor providers
|
||||
context.subscriptions.push(CatScratchEditorProvider.register(context));
|
||||
|
||||
if (+vscode.version.match(/1\.(\d+)/)![1] >= 45) {
|
||||
context.subscriptions.push(PawDrawEditorProvider.register(context));
|
||||
}
|
||||
}
|
||||
|
||||
416
custom-editor-sample/src/pawDrawEditor.ts
Normal file
416
custom-editor-sample/src/pawDrawEditor.ts
Normal file
@ -0,0 +1,416 @@
|
||||
import * as path from 'path';
|
||||
import * as vscode from 'vscode';
|
||||
import { getNonce } from './util';
|
||||
import { Disposable, disposeAll } from './dispose';
|
||||
|
||||
/**
|
||||
* Define the type of edits used in paw draw files.
|
||||
*/
|
||||
interface PawDrawEdit {
|
||||
readonly color: string;
|
||||
readonly stroke: ReadonlyArray<[number, number]>;
|
||||
}
|
||||
|
||||
interface PawDrawDocumentDelegate {
|
||||
getFileData(): Promise<Uint8Array>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Define the document (the data model) used for paw draw files.
|
||||
*/
|
||||
class PawDrawDocument extends Disposable implements vscode.CustomDocument {
|
||||
|
||||
static async create(
|
||||
uri: vscode.Uri,
|
||||
backupId: string | undefined,
|
||||
delegate: PawDrawDocumentDelegate,
|
||||
): Promise<PawDrawDocument | PromiseLike<PawDrawDocument>> {
|
||||
// If we have a backup, read that. Otherwise read the resource from the workspace
|
||||
const dataFile = typeof backupId === 'string' ? vscode.Uri.parse(backupId) : uri;
|
||||
const fileData = await vscode.workspace.fs.readFile(dataFile);
|
||||
return new PawDrawDocument(uri, fileData, delegate);
|
||||
}
|
||||
|
||||
private readonly _uri: vscode.Uri;
|
||||
|
||||
private _documentData: Uint8Array;
|
||||
private _edits: Array<PawDrawEdit> = [];
|
||||
private _savedEdits: Array<PawDrawEdit> = [];
|
||||
|
||||
private readonly _delegate: PawDrawDocumentDelegate;
|
||||
|
||||
private constructor(
|
||||
uri: vscode.Uri,
|
||||
initialContent: Uint8Array,
|
||||
delegate: PawDrawDocumentDelegate
|
||||
) {
|
||||
super();
|
||||
this._uri = uri;
|
||||
this._documentData = initialContent;
|
||||
this._delegate = delegate;
|
||||
}
|
||||
|
||||
public get uri() { return this._uri; }
|
||||
|
||||
public get documentData(): Uint8Array { return this._documentData; }
|
||||
|
||||
private readonly _onDidDispose = this._register(new vscode.EventEmitter<void>());
|
||||
/**
|
||||
* Fired when the document is disposed of.
|
||||
*/
|
||||
public readonly onDidDispose = this._onDidDispose.event;
|
||||
|
||||
private readonly _onDidChangeDocument = this._register(new vscode.EventEmitter<{
|
||||
readonly content?: Uint8Array;
|
||||
readonly edits: readonly PawDrawEdit[];
|
||||
}>());
|
||||
/**
|
||||
* Fired to notify webviews that the document has changed.
|
||||
*/
|
||||
public readonly onDidChangeContent = this._onDidChangeDocument.event;
|
||||
|
||||
private readonly _onDidChange = this._register(new vscode.EventEmitter<{
|
||||
readonly label: string,
|
||||
undo(): void,
|
||||
redo(): void,
|
||||
}>());
|
||||
/**
|
||||
* Fired to tell VS Code that an edit has occured in the document.
|
||||
*
|
||||
* This updates the document's dirty indicator.
|
||||
*/
|
||||
public readonly onDidChange = this._onDidChange.event;
|
||||
|
||||
/**
|
||||
* Called by VS Code when there are no more references to the document.
|
||||
*
|
||||
* This happens when all editors for it have been closed.
|
||||
*/
|
||||
dispose(): void {
|
||||
this._onDidDispose.fire();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
/**
|
||||
* Called when the user edits the document in a webview.
|
||||
*
|
||||
* This fires an event to notify VS Code that the document has been edited.
|
||||
*/
|
||||
makeEdit(edit: PawDrawEdit) {
|
||||
this._edits.push(edit);
|
||||
|
||||
this._onDidChange.fire({
|
||||
label: 'Stroke',
|
||||
undo: async () => {
|
||||
this._edits.pop();
|
||||
this._onDidChangeDocument.fire({
|
||||
edits: this._edits,
|
||||
});
|
||||
},
|
||||
redo: async () => {
|
||||
this._edits.push(edit);
|
||||
this._onDidChangeDocument.fire({
|
||||
edits: this._edits,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Called by VS Code when the user saves the document.
|
||||
*/
|
||||
async save(cancellation: vscode.CancellationToken): Promise<void> {
|
||||
await this.saveAs(this.uri, cancellation);
|
||||
this._savedEdits = Array.from(this._edits);
|
||||
}
|
||||
|
||||
/**
|
||||
* Called by VS Code when the user saves the document to a new location.
|
||||
*/
|
||||
async saveAs(targetResource: vscode.Uri, cancellation: vscode.CancellationToken): Promise<void> {
|
||||
const fileData = await this._delegate.getFileData();
|
||||
if (cancellation.isCancellationRequested) {
|
||||
return;
|
||||
}
|
||||
await vscode.workspace.fs.writeFile(targetResource, fileData);
|
||||
}
|
||||
|
||||
/**
|
||||
* Called by VS Code when the user calls `revert` on a document.
|
||||
*/
|
||||
async revert(_cancellation: vscode.CancellationToken): Promise<void> {
|
||||
const diskContent = await vscode.workspace.fs.readFile(this.uri);
|
||||
this._documentData = diskContent;
|
||||
this._edits = this._savedEdits;
|
||||
this._onDidChangeDocument.fire({
|
||||
content: diskContent,
|
||||
edits: this._edits,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Called by VS Code to backup the edited document.
|
||||
*
|
||||
* These backups are used to implement hot exit.
|
||||
*/
|
||||
async backup(destination: vscode.Uri, cancellation: vscode.CancellationToken): Promise<vscode.CustomDocumentBackup> {
|
||||
await this.saveAs(destination, cancellation);
|
||||
|
||||
return {
|
||||
id: destination.toString(),
|
||||
delete: async () => {
|
||||
try {
|
||||
await vscode.workspace.fs.delete(destination);
|
||||
} catch {
|
||||
// noop
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Provider for paw draw editors.
|
||||
*
|
||||
* Paw draw editors are used for `.pawDraw` files, which are just `.png` files with a different file extension.
|
||||
*
|
||||
* This provider demonstrates:
|
||||
*
|
||||
* - How to implement a custom editor for binary files.
|
||||
* - Setting up the initial webview for a custom editor.
|
||||
* - Loading scripts and styles in a custom editor.
|
||||
* - Communication between VS Code and the custom editor.
|
||||
* - Using CustomDocuments to store information that is shared between multiple custom editors.
|
||||
* - Implementing save, undo, redo, and revert.
|
||||
* - Backing up a custom editor.
|
||||
*/
|
||||
export class PawDrawEditorProvider implements vscode.CustomEditorProvider<PawDrawDocument> {
|
||||
|
||||
public static register(context: vscode.ExtensionContext): vscode.Disposable {
|
||||
return vscode.window.registerCustomEditorProvider2(
|
||||
PawDrawEditorProvider.viewType,
|
||||
new PawDrawEditorProvider(context),
|
||||
{
|
||||
// For this demo extension, we enable `retainContextWhenHidden` which keeps the
|
||||
// webview alive even when it is not visible. You should avoid using this setting
|
||||
// unless is absolutely required as it does have memory overhead.
|
||||
webviewOptions: {
|
||||
retainContextWhenHidden: true,
|
||||
},
|
||||
supportsMultipleEditorsPerDocument: false,
|
||||
});
|
||||
}
|
||||
|
||||
private static readonly viewType = 'catCustoms.pawDraw';
|
||||
|
||||
/**
|
||||
* Tracks all known webviews
|
||||
*/
|
||||
private readonly webviews = new WebviewCollection();
|
||||
|
||||
constructor(
|
||||
private readonly _context: vscode.ExtensionContext
|
||||
) { }
|
||||
|
||||
//#region CustomEditorProvider
|
||||
|
||||
async openCustomDocument(
|
||||
uri: vscode.Uri,
|
||||
openContext: { backupId?: string },
|
||||
_token: vscode.CancellationToken
|
||||
): Promise<PawDrawDocument> {
|
||||
const document = await PawDrawDocument.create(uri, openContext.backupId, {
|
||||
getFileData: async () => {
|
||||
const webviewsForDocument: any = Array.from(this.webviews.get(document.uri));
|
||||
if (!webviewsForDocument.length) {
|
||||
throw new Error('Could not find webview to save for');
|
||||
}
|
||||
const panel = webviewsForDocument[0];
|
||||
const response = await this.postMessageWithResponse<{ data: number[] }>(panel, 'getFileData', {});
|
||||
return new Uint8Array(response.data);
|
||||
}
|
||||
});
|
||||
|
||||
const listeners: vscode.Disposable[] = [];
|
||||
|
||||
listeners.push(document.onDidChange(e => {
|
||||
// Tell VS Code that the document has been edited by the use.
|
||||
this._onDidChangeCustomDocument.fire({
|
||||
document,
|
||||
...e,
|
||||
});
|
||||
}));
|
||||
|
||||
listeners.push(document.onDidChangeContent(e => {
|
||||
// Update all webviews when the document changes
|
||||
for (const webviewPanel of this.webviews.get(document.uri)) {
|
||||
this.postMessage(webviewPanel, 'update', {
|
||||
edits: e.edits,
|
||||
content: e.content,
|
||||
});
|
||||
}
|
||||
}));
|
||||
|
||||
document.onDidDispose(() => disposeAll(listeners));
|
||||
|
||||
return document;
|
||||
}
|
||||
|
||||
async resolveCustomEditor(
|
||||
document: PawDrawDocument,
|
||||
webviewPanel: vscode.WebviewPanel,
|
||||
_token: vscode.CancellationToken
|
||||
): Promise<void> {
|
||||
// Add the webview to our internal set of active webviews
|
||||
this.webviews.add(document.uri, webviewPanel);
|
||||
|
||||
// Setup initial content for the webview
|
||||
webviewPanel.webview.options = {
|
||||
enableScripts: true,
|
||||
};
|
||||
webviewPanel.webview.html = this.getHtmlForWebview(webviewPanel.webview);
|
||||
|
||||
webviewPanel.webview.onDidReceiveMessage(e => this.onMessage(document, e));
|
||||
|
||||
// Wait for the webview to be properly ready before we init
|
||||
webviewPanel.webview.onDidReceiveMessage(e => {
|
||||
if (e.type === 'ready') {
|
||||
this.postMessage(webviewPanel, 'init', {
|
||||
value: document.documentData
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private readonly _onDidChangeCustomDocument = new vscode.EventEmitter<vscode.CustomDocumentEditEvent<PawDrawDocument>>();
|
||||
public readonly onDidChangeCustomDocument = this._onDidChangeCustomDocument.event;
|
||||
|
||||
public saveCustomDocument(document: PawDrawDocument, cancellation: vscode.CancellationToken): Thenable<void> {
|
||||
return document.save(cancellation);
|
||||
}
|
||||
|
||||
public saveCustomDocumentAs(document: PawDrawDocument, destination: vscode.Uri, cancellation: vscode.CancellationToken): Thenable<void> {
|
||||
return document.saveAs(destination, cancellation);
|
||||
}
|
||||
|
||||
public revertCustomDocument(document: PawDrawDocument, cancellation: vscode.CancellationToken): Thenable<void> {
|
||||
return document.revert(cancellation);
|
||||
}
|
||||
|
||||
public backupCustomDocument(document: PawDrawDocument, context: vscode.CustomDocumentBackupContext, cancellation: vscode.CancellationToken): Thenable<vscode.CustomDocumentBackup> {
|
||||
return document.backup(context.destination, cancellation);
|
||||
}
|
||||
|
||||
//#endregion
|
||||
|
||||
/**
|
||||
* Get the static HTML used for in our editor's webviews.
|
||||
*/
|
||||
private getHtmlForWebview(webview: vscode.Webview): string {
|
||||
// Local path to script and css for the webview
|
||||
const scriptUri = webview.asWebviewUri(vscode.Uri.file(
|
||||
path.join(this._context.extensionPath, 'media', 'pawDraw.js')
|
||||
));
|
||||
const styleUri = webview.asWebviewUri(vscode.Uri.file(
|
||||
path.join(this._context.extensionPath, 'media', 'pawDraw.css')
|
||||
));
|
||||
|
||||
// Use a nonce to whitelist which scripts can be run
|
||||
const nonce = getNonce();
|
||||
|
||||
return /* html */`
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<!--
|
||||
Use a content security policy to only allow loading images from https or from our extension directory,
|
||||
and only allow scripts that have a specific nonce.
|
||||
-->
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src ${webview.cspSource} blob:; style-src ${webview.cspSource}; script-src 'nonce-${nonce}';">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<link href="${styleUri}" rel="stylesheet" />
|
||||
|
||||
<title>Paw Draw</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="drawing-canvas"></div>
|
||||
|
||||
<div class="drawing-controls">
|
||||
<button data-color="black" class="black active" title="Black"></button>
|
||||
<button data-color="white" class="white" title="White"></button>
|
||||
<button data-color="red" class="red" title="Red"></button>
|
||||
<button data-color="green" class="green" title="Green"></button>
|
||||
<button data-color="blue" class="blue" title="Blue"></button>
|
||||
</div>
|
||||
|
||||
<script nonce="${nonce}" src="${scriptUri}"></script>
|
||||
</body>
|
||||
</html>`;
|
||||
}
|
||||
|
||||
private _requestId = 1;
|
||||
private readonly _callbacks = new Map<number, (response: any) => void>();
|
||||
|
||||
private postMessageWithResponse<R = unknown>(panel: vscode.WebviewPanel, type: string, body: any): Promise<R> {
|
||||
const requestId = this._requestId++;
|
||||
const p = new Promise<R>(resolve => this._callbacks.set(requestId, resolve));
|
||||
panel.webview.postMessage({ type, requestId, body });
|
||||
return p;
|
||||
}
|
||||
|
||||
private postMessage(panel: vscode.WebviewPanel, type: string, body: any): void {
|
||||
panel.webview.postMessage({ type, body });
|
||||
}
|
||||
|
||||
private onMessage(document: PawDrawDocument, message: any) {
|
||||
switch (message.type) {
|
||||
case 'stroke':
|
||||
document.makeEdit(message as PawDrawEdit);
|
||||
return;
|
||||
|
||||
case 'response':
|
||||
const callback = this._callbacks.get(message.requestId);
|
||||
callback?.(message.body);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Tracks all webviews.
|
||||
*/
|
||||
class WebviewCollection {
|
||||
|
||||
private readonly _webviews = new Set<{
|
||||
readonly resource: string;
|
||||
readonly webviewPanel: vscode.WebviewPanel;
|
||||
}>();
|
||||
|
||||
/**
|
||||
* Get all known webviews for a given uri.
|
||||
*/
|
||||
public *get(uri: vscode.Uri): Iterable<vscode.WebviewPanel> {
|
||||
const key = uri.toString();
|
||||
for (const entry of this._webviews) {
|
||||
if (entry.resource === key) {
|
||||
yield entry.webviewPanel;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Add a new webview to the collection.
|
||||
*/
|
||||
public add(uri: vscode.Uri, webviewPanel: vscode.WebviewPanel) {
|
||||
const entry = { resource: uri.toString(), webviewPanel };
|
||||
this._webviews.add(entry);
|
||||
|
||||
webviewPanel.onDidDispose(() => {
|
||||
this._webviews.delete(entry);
|
||||
});
|
||||
}
|
||||
}
|
||||
2097
custom-editor-sample/src/vscode.proposed.d.ts
vendored
Normal file
2097
custom-editor-sample/src/vscode.proposed.d.ts
vendored
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user