14 lines
8.0 KiB
JSON
14 lines
8.0 KiB
JSON
|
[
|
||
|
|
{
|
||
|
|
"id": "2d",
|
||
|
|
"name": "2d",
|
||
|
|
"path": "builtin<2d>",
|
||
|
|
"contents": "// This function is called by obshtml when it wants to open the graph\nfunction run(args) {\n if (window.ObsHtmlGraph.graph_dependencies_loaded['2d'] == false){\n // load three dependencies in succession and then run initGraph(args)\n load_script_on_demand(\n '//unpkg.com/force-graph', load_script_on_demand, [\"//unpkg.com/d3-force\", load_script_on_demand, [\"https://d3js.org/d3.v4.min.js\", initGraph, [args]]]\n )\n // tell obshtml that the dependencies have been loaded\n window.ObsHtmlGraph.graph_dependencies_loaded['2d'] = true;\n\n }\n else {\n // just run directly\n initGraph(args)\n }\n}\n\nfunction initGraph(args) {\n // open div right before loading the graph to avoid opening an empty div\n args.graph_container.style.display = \"block\";\n\n // Load data then start graph\n fetch(args.data).then(res => res.json()).then(data => {\n\n // overwrites\n let g = window.ObsHtmlGraph.graphs[args.uid];\n g.actions['select_node'] = function(args, graph){\n return graph_select_node(args, graph)\n }\n\n g.graph = ForceGraph()\n (args.graph_container)\n .graphData(data)\n .width(args.width)\n .maxZoom(10)\n .height(args.height)\n .backgroundColor(g.colors.bg)\n .nodeLabel('name')\n .d3Force(\"charge\", d3.forceManyBody().strength(args.coalesce_force))\n .nodeColor((node) => {return g.colors.node_inactive})\n .nodeCanvasObjectMode(() => 'after')\n .nodeCanvasObject((node, ctx, globalScale) => {\n // draw text only for nodes connected to the current node\n let isConnected = false;\n node.links.forEach(link => {\n if (link == g.current_node_id){\n isConnected = true;\n }\n })\n // draw text\n if (isConnected){\n const label = node.name;\n const fontSize = 11 / globalScale;\n ctx.font = `${fontSize}px Sans-Serif`;\n const textWidth = ctx.measureText(label).width; \n ctx.textAlign = 'center';\n ctx.textBaseline = 'middle';\n ctx.fillStyle = g.colors.text;\n ctx.fillText(label, node.x, node.y+8);\n }\n \n // color only main node & semiconnected\n if (node.id != g.current_node_id){\n if (isConnected){\n ctx.beginPath();\n ctx.arc(node.x, node.y, 4, 0, 2 * Math.PI);\n ctx.fillStyle = g.colors.node_semiactive;\n ctx.fill();\n }\n return\n }\n\n // color node\n ctx.beginPath();\n ctx.arc(node.x, node.y, 4+1, 0, 2 * Math.PI);\n ctx.fillStyle = g.colors.node_active_border;\n ctx.fill();\n ctx.beginPath();\n ctx.arc(node.x, node.y, 4, 0, 2 * Math.PI);\n ctx.fillStyle = g.colors.node_active;\n ctx.fill();\n\n })\n .linkColor(link => {\n if (link.source.id == g.current_node_id){\n return g.colors.link_active\n }\n if (link.target.id == g.current_node_id){\n return g.colors.link_active\n }\n return g.colors.link_inactive\n })\n .linkDirectionalParticles(\"value\")\n .linkDirectionalParticleSpeed(0.010)\n .linkDirectionalParticleWidth(link => {\n if (link.source.id == g.current_node_id || link.target.id == g.current_node_id){\n return 4.0\n }\n return 0\n })\n
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"id": "3d",
|
||
|
|
"name": "3d",
|
||
|
|
"path": "builtin<3d>",
|
||
|
|
"contents": "function run(args) {\n function start(){\n args.graph_container.style.display = \"block\"; // open div right before loading the graph to avoid opening an empty div\n initGraph_3d(args)\n window.ObsHtmlGraph.graph_dependencies_loaded['3d'] = true;\n }\n\n if (window.ObsHtmlGraph.graph_dependencies_loaded['3d'] == false){\n load_script_on_demand(\n CONFIGURED_HTML_URL_PREFIX + '/obs.html/static/3d-force-graph.js', \n start,\n []\n )\n }\n else {\n start();\n }\n}\n\nfunction initGraph_3d(args) {\n let g = window.ObsHtmlGraph.graphs[args.uid];\n g.graph = ForceGraph3D()\n (args.graph_container)\n .jsonUrl(args.data)\n .width(args.width)\n .height(args.height)\n .nodeLabel('name')\n .linkDirectionalParticles(\"value\")\n .linkDirectionalParticleSpeed(0.010)\n .linkDirectionalParticleWidth(2.0)\n .nodeColor(node => {\n if (node.id == g.current_node_id){\n return '#ff0000'\n }\n let isConnected = false;\n node.links.forEach(link => {\n if (link == g.current_node_id){\n isConnected = true;\n }\n })\n if (isConnected){\n return '#f7be49';\n }\n return '#ffffff'\n })\n .linkColor(link => {\n if (link.source == g.current_node_id || link.target == g.current_node_id){\n return '#ff0000'\n }\n return '#dadada'\n })\n .linkOpacity(0.3)\n .onNodeClick(node => {\n args.node = node;\n g.actions['left_click'](args)\n })\n .onNodeRightClick(node => {\n args.node = node;\n g.actions['right_click'](args, g.graph)\n });\n}\n\n\nexport { \n run\n};"
|
||
|
|
}
|
||
|
|
]
|