SVG
VSCode
VisualStudioCode

SVG の図形とテキスト両方編集できるVSCode拡張を作った

SVG Editor マーケットプレイスはここです

image.png

SVGの画像を表示しながら図形とテキストの両方を編集できるものです。図形の操作やテキストの変更は即時もう一方に反映されます。
previewHtmlコマンドというのがあることを知って、これならなんでもできるじゃん!てことで作りました。要するに右側はHTMLです。VSCodeの現在適用されているテーマの色とかは拡張からは取れないんですが、透過色などで色々ごまかしてボタンのデザインをしているのがコツです。また、previewから元の拡張のコードにデータを受けわたすのはリンク方式しかないですが、これはリンクをクリックしたことにするコードをpreviewのjs上で使えば任意のタイミングでデータの受け渡しが可能です。Markdownの拡張にもこの方法が使われているらしいです。内緒ですよ。

以下蛇足

リンクによるデータの受け渡し

let href = encodeURI('command:vscode.previewHtml?' + JSON.stringify(someUri));
let html = '<a href="' + href + '">Show Resource...</a>.';

ユーザーがリンクを踏むとこの場合 vscode.previewHtml コマンドが ? 以降にある引数つきで発動します。

window.parent.postMessage({
   command: 'did-click-link',
   data: `command:_markdown.revealLine?${encodeURIComponent(JSON.stringify(args))}`
}, 'file://');

そしてこれでリンクを踏んだことにします。