129 lines
3.7 KiB
HTML
129 lines
3.7 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<body>
|
|
<div id="container"></div>
|
|
<script src="../js/d3.v7.js"></script>
|
|
<script type="module">
|
|
import Graph from "./graph.mjs";
|
|
import ModalEditor from "./modal.mjs";
|
|
|
|
const width = 800;
|
|
const height = 800;
|
|
const svg = d3
|
|
.create("svg")
|
|
.attr("width", width)
|
|
.attr("height", height)
|
|
.attr("viewBox", [-width / 2, -height / 2, width, height])
|
|
.attr("style", "max-width: 100%; height: auto;");
|
|
const color = d3.scaleOrdinal(d3.schemeCategory10);
|
|
|
|
const graph = new Graph();
|
|
const editor = new ModalEditor(graph);
|
|
|
|
const simulation = d3
|
|
.forceSimulation(graph.nodes)
|
|
.force(
|
|
"link",
|
|
d3.forceLink(graph.links).id((d) => d.id),
|
|
)
|
|
.force("charge", d3.forceManyBody())
|
|
.force("x", d3.forceX())
|
|
.force("y", d3.forceY());
|
|
const selectionGroup = svg.append("g");
|
|
const secondaryGroup = svg.append("g");
|
|
const nodeGroup = svg.append("g");
|
|
const linkGroup = svg
|
|
.append("g")
|
|
.attr("stroke", "#999")
|
|
.attr("stroke-opacity", 0.6);
|
|
const selection = selectionGroup
|
|
.append("circle")
|
|
.style("fill", "#ccccccbb")
|
|
.style("stroke", "#718e51")
|
|
.style("stroke-width", 1)
|
|
.attr("r", 10);
|
|
let selectionId = 1;
|
|
|
|
function updateSelection() {
|
|
for (let n of graph.nodes) {
|
|
if (n.id == selectionId) {
|
|
selection.attr("cx", n.x).attr("cy", n.y);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
function graphLayout() {
|
|
const link = linkGroup
|
|
.selectAll("line")
|
|
.data(graph.links, (d) => `${d.source},${d.target}`)
|
|
.join("line");
|
|
|
|
const node = nodeGroup
|
|
.selectAll("g")
|
|
.data(graph.nodes, (d) => d.id)
|
|
.join(function (enter) {
|
|
const lg = enter.append("g");
|
|
lg.append("circle")
|
|
.attr("r", 5)
|
|
.attr("stroke-width", 1.5)
|
|
.attr("fill", (d) => color(d.kind));
|
|
lg.append("text")
|
|
.attr("dy", ".35em")
|
|
.attr("text-anchor", "middle")
|
|
.style("font", "10px monospace")
|
|
.text((d) => d.name);
|
|
return lg;
|
|
})
|
|
.attr("transform", (d) => `translate(${d.x}, ${d.y})`);
|
|
|
|
const secondary = secondaryGroup
|
|
.selectAll("circle")
|
|
.data(editor.secondarySelection, (d) => d.id)
|
|
.join("circle")
|
|
.attr("r", 7)
|
|
.attr("fill", "purple");
|
|
simulation.nodes(graph.nodes);
|
|
simulation.force("link").links(graph.links);
|
|
simulation.alpha(1).restart();
|
|
}
|
|
|
|
graphLayout();
|
|
|
|
const commandBar = svg
|
|
.append("g")
|
|
.append("text")
|
|
.attr("transform", `translate(${-width / 2 + 10}, ${height / 4})`)
|
|
.style("font", "10px monospace")
|
|
.text("command bar here")
|
|
.style("fill", "darkgreen");
|
|
|
|
// update the node positions on each tick
|
|
simulation.on("tick", () => {
|
|
linkGroup
|
|
.selectAll("line")
|
|
.attr("x1", (d) => d.source.x)
|
|
.attr("y1", (d) => d.source.y)
|
|
.attr("x2", (d) => d.target.x)
|
|
.attr("y2", (d) => d.target.y);
|
|
nodeGroup
|
|
.selectAll("g")
|
|
.attr("transform", (d) => `translate(${d.x}, ${d.y})`);
|
|
secondaryGroup
|
|
.selectAll("circle")
|
|
.attr("cx", (d) => d.x)
|
|
.attr("cy", (d) => d.y);
|
|
updateSelection();
|
|
});
|
|
|
|
d3.select("body").on("keydown", function (e) {
|
|
editor.handleKeyup(e);
|
|
commandBar.text(editor.display());
|
|
graphLayout();
|
|
});
|
|
|
|
container.append(svg.node());
|
|
</script>
|
|
</body>
|
|
</html>
|