vis-script-button
やっつけ風味
vis.js の機能のうち network の機能しか使えない
networkの表現はリッチで、ノードをつまんでグリグリできたりする
動かすために ad hoc なことをしている
↓アイコン用画像
https://gyazo.com/c2b26a8471825086ba03f50bdf2b3588
code:button.js
(() => {
let VISjs = document.getElementById('__VISjs__')
if (!VISjs) {
// CSSの読み込み
const VIScssId = '__VIScss__';
let style = document.getElementById(VIScssId)
style?.remove()
document.head.insertAdjacentHTML('beforeend',`
<style id="${VIScssId}">
@import "${VIScssURL}";
</style>
`);
VISjs = document.createElement("script");
VISjs.id = '__VISjs__'
VISjs.src = '//cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js'
document.head.appendChild(VISjs);
}
let vscript = document.getElementById('__VISsc__')
if (vscript){
console.log("nop")
// リロードしてリセット
location.reload(false)
} else {
// 表示領域を作る
const editor = document.getElementById('editor');
editor.insertAdjacentHTML('beforeend',`
<div id="vis" style="width:600px;height:500px;" >
</div>
`);
vscript = document.createElement("script");
vscript.id = '__VISsc__'
vscript.src = https://scrapbox.io/api/code//${scrapbox.Project.name}/${encodeURIComponent(scrapbox.Page.title)}/visScript.js
document.body.appendChild(vscript);
}
})()
code:button2.js
import {installCDN} from '/api/code/villagepump/install-CDN/script.js';
export async function execute() {
const VIScssId = '__VIScss__';
let style = document.getElementById(VIScssId)
style?.remove()
document.head.insertAdjacentHTML('beforeend',`
<style id="${VIScssId}">
@import "${VIScssURL}";
</style>
`);
await installCDN({id: '__VISjs__', src: '//cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js'});
const vscript = new VISScript('__VISsc__');
if(vscript.hasScript()) {
vscript.remove();
alert("remove");
location.reload(false)
return;
}
vscript.draw();
}
class VISScript {
constructor({id}) {
this.id = id;
}
draw() {
// 表示領域を作る
const editor = document.getElementById('editor');
editor.insertAdjacentHTML('beforeend',`
<div id="vis" style="width:600px;height:500px;" >
</div>
`);
let vscript = document.createElement("script");
vscript.id = this.id;
vscript.src = https://scrapbox.io/api/code//${scrapbox.Project.name}/${encodeURIComponent(scrapbox.Page.title)}/visScript.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...');
}
}
code:visScript.js
// create an array with nodes
var nodes = new vis.DataSet([
{ id: 1, label: "ノード 1" },
{ id: 2, label: "Node 2" },
{ id: 3, label: "Node 3" },
{ id: 4, label: "Node 4" },
{ id: 5, label: "Node 5" },
]);
// create an array with edges
var edges = new vis.DataSet([
{ from: 1, to: 3 },
{ from: 1, to: 2 },
{ from: 2, to: 4 },
{ from: 2, to: 5 },
{ from: 3, to: 3 },
]);
// create a network
var container = document.getElementById("vis");
var data = {
nodes: nodes,
edges: edges,
};
var options = {};
var network = new vis.Network(container, data, options);
vis-script-button.icon ←実行ボタン