viz-script-button

↓実行ボタン

viz-script-button.icon

↓アイコン用画像

https://gyazo.com/91b5ced64196f95f1c650da5f3455bda

コード

viz.js と full.render.js を読み込む必要がる

この部分を洗練させたい

code: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';

document.body.appendChild(vscript);

}

})()

code:icon-button.js

//import {installCDN} from '/api/code/villagepump/install-CDN/script.js';

import {installCDN} from '/api/code/suto3/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';

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...');

}

}

実行サンプル

code:vizScript.js

const graph = `

digraph {

a -> b;

a -> c;

b -> d;

c -> e;

d -> e;

}

`;

実行サンプル

code:vizScript.js

const viz = new Viz();

viz.renderSVGElement(graph)

.then(function(element) {

const editor = document.getElementById('editor');

editor.appendChild(element);

});

UserScript.icon