viz-script-button
viz.jsのスクリプトを動かすアイコンボタン
Graphviz の 記法が使える
↓実行ボタン
↓アイコン用画像
viz.js と full.render.js を読み込む必要がる
この部分を洗練させたい
button.js(()=> {
let VIZjs = document.getElementById('__VIZjs__')
if (!VIZjs) {
VIZjs = document.createElement("script");
VIZjs.id = '__VIZjs__'
VIZjs.src = '//cdnjs.cloudflare.com/ajax/libs/viz.js/2.1.2/viz.js'
document.head.appendChild(VIZjs);
let FRjs = document.createElement("script");
FRjs.id = '__FRjs__'
FRjs.src = '//cdnjs.cloudflare.com/ajax/libs/viz.js/2.1.2/full.render.js'
document.head.appendChild(FRjs);
}
let vscript = document.getElementById('__VIZsc__')
if (vscript){
console.log("nop")
// リロードしてリセット
location.reload(false)
} else {
vscript = document.createElement("script");
vscript.id = '__VIZsc__'
vscript.type = 'module';
vscript.src = `https://scrapbox.io/api/code/${scrapbox.Project.name}/${encodeURIComponent(scrapbox.Page.title)}/vizScript.js`
document.body.appendChild(vscript);
}
})()button2.jsimport {installCDN} from '/api/code/villagepump/install-CDN/script.js';
export async function execute() {
await installCDN({id: '__VIZjs__', src: '//cdnjs.cloudflare.com/ajax/libs/viz.js/2.1.2/viz.js'});
await installCDN({id: '__FRjs__', src: '//cdnjs.cloudflare.com/ajax/libs/viz.js/2.1.2/full.render.js'});
const vscript = new VIZScript('__VIZsc__');
if(vscript.hasScript()) {
vscript.remove();
alert("removed");
location.reload(false)
return;
}
vscript.draw();
}
class VIZScript {
constructor({id}) {
this.id = id;
}
draw() {
let vscript = document.createElement("script");
vscript.id = this.id;
vscript.type = 'module';
vscript.src = `https://scrapbox.io/api/code/${scrapbox.Project.name}/${encodeURIComponent(scrapbox.Page.title)}/vizScript.js` ;
document.body.appendChild(vscript);
}
hasScript() { return document.getElementById(this.id) !== null;}
remove() {
const vscript = document.getElementById(this.id);
if (!vscript) return;
// 既にscriptがある場合は削除する
vscript.parentNode.removeChild(vscript);
console.log('The script already exists. Removing it...');
}
}vizScript.js const graph = `
digraph {
a -> b;
a -> c;
b -> d;
}
`;
vizScript.jsconst viz = new Viz();
viz.renderSVGElement(graph)
.then(function(element) {
const editor = document.getElementById('editor');
editor.appendChild(element);
});