@jiangzhongxi0322/messagechannel 1.0.0 → 1.0.1

package/examples/url-webview-sample/media/catScratch.css

@@ -0,0 +1,65 @@
+body {
+	justify-content: center;
+	align-items: center;
+	margin: 1em 2em;
+	background-image: url(./sand.jpg);
+	background-repeat: repeat;
+}
+
+body.vscode-dark {
+	background-image: url(./sand-dark.jpg);
+}
+
+.notes {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, 100px);
+	grid-template-rows: repeat(auto-fill, 100px);
+	grid-gap: 2em;
+	justify-content: center;
+}
+
+.note {
+	display: flex;
+	flex-direction: column;
+	border-radius: 5px;
+	background-color: var(--vscode-editor-background);
+	text-align: center;
+	padding: 0.6em;
+	position: relative;
+	overflow: hidden;
+}
+
+.note .text {
+	flex: 1;
+	font-size: 3em;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.note .created {
+	font-style: italic;
+	font-size: 0.75em;
+}
+
+.add-button {
+	height: 100px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.delete-button {
+	position: absolute;
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+.delete-button:before {
+	content: 'delete';
+}
+
+.note:hover .delete-button {
+	display: block;
+}

package/examples/url-webview-sample/media/catScratch.js

@@ -0,0 +1,100 @@
+// @ts-check
+
+// Script run within the webview itself.
+(function () {
+
+	// Get a reference to the VS Code webview api.
+	// We use this API to post messages back to our extension.
+
+	// @ts-ignore
+	const vscode = acquireVsCodeApi();
+
+
+	const notesContainer = /** @type {HTMLElement} */ (document.querySelector('.notes'));
+
+	const addButtonContainer = document.querySelector('.add-button');
+	addButtonContainer.querySelector('button').addEventListener('click', () => {
+		vscode.postMessage({
+			type: 'add'
+		});
+	})
+
+	const errorContainer = document.createElement('div');
+	document.body.appendChild(errorContainer);
+	errorContainer.className = 'error'
+	errorContainer.style.display = 'none'
+
+	/**
+	 * Render the document in the webview.
+	 */
+	function updateContent(/** @type {string} */ text) {
+		let json;
+		try {
+			if (!text) {
+				text = '{}';
+			}
+			json = JSON.parse(text);
+		} catch {
+			notesContainer.style.display = 'none';
+			errorContainer.innerText = 'Error: Document is not valid json';
+			errorContainer.style.display = '';
+			return;
+		}
+		notesContainer.style.display = '';
+		errorContainer.style.display = 'none';
+
+		// Render the scratches
+		notesContainer.innerHTML = '';
+		for (const note of json.scratches || []) {
+			const element = document.createElement('div');
+			element.className = 'note';
+			notesContainer.appendChild(element);
+
+			const text = document.createElement('div');
+			text.className = 'text';
+			const textContent = document.createElement('span');
+			textContent.innerText = note.text;
+			text.appendChild(textContent);
+			element.appendChild(text);
+
+			const created = document.createElement('div');
+			created.className = 'created';
+			created.innerText = new Date(note.created).toUTCString();
+			element.appendChild(created);
+
+			const deleteButton = document.createElement('button');
+			deleteButton.className = 'delete-button';
+			deleteButton.addEventListener('click', () => {
+				vscode.postMessage({ type: 'delete', id: note.id, });
+			});
+			element.appendChild(deleteButton);
+		}
+
+		notesContainer.appendChild(addButtonContainer);
+	}
+
+	// Handle messages sent from the extension to the webview
+	window.addEventListener('message', event => {
+		const message = event.data; // The json data that the extension sent
+		switch (message.type) {
+			case 'update':
+				const text = message.text;
+
+				// Update our webview's content
+				updateContent(text);
+
+				// Then persist state information.
+				// This state is returned in the call to `vscode.getState` below when a webview is reloaded.
+				vscode.setState({ text });
+
+				return;
+		}
+	});
+
+	// Webviews are normally torn down when not visible and re-created when they become visible again.
+	// State lets us save information across these re-loads
+	const state = vscode.getState();
+	if (state) {
+		updateContent(state.text);
+	}
+}());

package/examples/url-webview-sample/media/paw-color.svg

@@ -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>

package/examples/url-webview-sample/media/paw-outline.svg

@@ -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>

package/examples/url-webview-sample/media/pawDraw.css

@@ -0,0 +1,83 @@
+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:disabled {
+	opacity: 0.5;
+}
+
+.drawing-controls button.active:not(:disabled),
+.drawing-controls button:hover:not(:disabled) {
+	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;
+}

package/examples/url-webview-sample/media/pawDraw.js

@@ -0,0 +1,266 @@
+// @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.editable = 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;
+		}
+
+		setEditable(editable) {
+			this.editable = editable;
+			const colorButtons = /** @type {NodeListOf<HTMLButtonElement>} */ (document.querySelectorAll('.drawing-controls button'));
+			for (const colorButton of colorButtons) {
+				colorButton.disabled = !editable;
+			}
+		}
+
+		_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 || !this.editable) {
+					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 || !this.editable) {
+					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 || !this.editable) {
+					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();
+		}
+
+		/**
+		 * @param {Array<Stroke> | undefined} strokes 
+		 */
+		async resetUntitled(strokes = []) {
+			const size = 100;
+			this.initialCanvas.width = this.drawingCanvas.width = size;
+			this.initialCanvas.height = this.drawingCanvas.height = size;
+
+			this.initialCtx.save();
+			{
+				this.initialCtx.fillStyle = 'white';
+				this.initialCtx.fillRect(0, 0, size, size);
+			}
+			this.initialCtx.restore();
+
+			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/png')
+			});
+
+			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':
+				{
+					editor.setEditable(body.editable);
+					if (body.untitled) {
+						await editor.resetUntitled();
+						return;
+					} else {
+						// Load the initial image into the canvas.
+						await editor.reset(body.value);
+						return;
+					}
+				}
+			case 'update':
+				{
+					const strokes = body.edits.map(edit => new Stroke(edit.color, edit.stroke));
+					await editor.reset(body.content, 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: Array.from(data) });
+					});
+					return;
+				}
+		}
+	});
+
+	// Signal to VS Code that the webview is initialized.
+	vscode.postMessage({ type: 'ready' });
+}());

package/examples/url-webview-sample/media/reset.css

@@ -0,0 +1,30 @@
+html {
+	box-sizing: border-box;
+	font-size: 13px;
+}
+
+*,
+*:before,
+*:after {
+	box-sizing: inherit;
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ol,
+ul {
+	margin: 0;
+	padding: 0;
+	font-weight: normal;
+}
+
+img {
+	max-width: 100%;
+	height: auto;
+}

package/examples/url-webview-sample/media/vscode.css

@@ -0,0 +1,91 @@
+:root {
+	--container-paddding: 20px;
+	--input-padding-vertical: 6px;
+	--input-padding-horizontal: 4px;
+	--input-margin-vertical: 4px;
+	--input-margin-horizontal: 0;
+}
+
+body {
+	padding: 0 var(--container-paddding);
+	color: var(--vscode-foreground);
+	font-size: var(--vscode-font-size);
+	font-weight: var(--vscode-font-weight);
+	font-family: var(--vscode-font-family);
+	background-color: var(--vscode-editor-background);
+}
+
+ol,
+ul {
+	padding-left: var(--container-paddding);
+}
+
+body > *,
+form > * {
+	margin-block-start: var(--input-margin-vertical);
+	margin-block-end: var(--input-margin-vertical);
+}
+
+*:focus {
+	outline-color: var(--vscode-focusBorder) !important;
+}
+
+a {
+	color: var(--vscode-textLink-foreground);
+}
+
+a:hover,
+a:active {
+	color: var(--vscode-textLink-activeForeground);
+}
+
+code {
+	font-size: var(--vscode-editor-font-size);
+	font-family: var(--vscode-editor-font-family);
+}
+
+button {
+	border: none;
+	padding: var(--input-padding-vertical) var(--input-padding-horizontal);
+	width: 100%;
+	text-align: center;
+	outline: 1px solid transparent;
+	outline-offset: 2px !important;
+	color: var(--vscode-button-foreground);
+	background: var(--vscode-button-background);
+}
+
+button:hover {
+	cursor: pointer;
+	background: var(--vscode-button-hoverBackground);
+}
+
+button:focus {
+	outline-color: var(--vscode-focusBorder);
+}
+
+button.secondary {
+	color: var(--vscode-button-secondaryForeground);
+	background: var(--vscode-button-secondaryBackground);
+}
+
+button.secondary:hover {
+	background: var(--vscode-button-secondaryHoverBackground);
+}
+
+input:not([type='checkbox']),
+textarea {
+	display: block;
+	width: 100%;
+	border: none;
+	font-family: var(--vscode-font-family);
+	padding: var(--input-padding-vertical) var(--input-padding-horizontal);
+	color: var(--vscode-input-foreground);
+	outline-color: var(--vscode-input-border);
+	background-color: var(--vscode-input-background);
+}
+
+input::placeholder,
+textarea::placeholder {
+	color: var(--vscode-input-placeholderForeground);
+}