618 lines
23 KiB
JavaScript
618 lines
23 KiB
JavaScript
import { DataSet } from 'vis-data/esnext'
|
|
import { Network } from 'vis-network/esnext'
|
|
|
|
function generatePortSVG(text) {
|
|
// pre-calculate text width
|
|
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
|
const textEl = document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
|
|
|
const fontFamily = 'helvetica';
|
|
const fontSize = 14;
|
|
textEl.textContent = text;
|
|
textEl.setAttribute('font-family', fontFamily);
|
|
textEl.setAttribute('font-size', fontSize + 'px');
|
|
svg.appendChild(textEl);
|
|
document.body.appendChild(svg);
|
|
|
|
const textWidth = textEl.getComputedTextLength();
|
|
textEl.remove();
|
|
svg.remove();
|
|
|
|
const rectPadding = 2;
|
|
const rectBorderWidth = 2;
|
|
const rectX = rectBorderWidth / 2;
|
|
const rectY = rectBorderWidth / 2;
|
|
const rectWidth = textWidth + rectBorderWidth + rectPadding * 2;
|
|
const rectHeight = fontSize + rectBorderWidth + rectPadding * 2;
|
|
const svgHeight = rectHeight + rectY + rectBorderWidth / 2;
|
|
const svgWidth = rectWidth + rectX + rectBorderWidth / 2;
|
|
const textX = svgWidth / 2 ;
|
|
const textY = svgHeight / 2;
|
|
|
|
// generate SVG
|
|
return 'data:image/svg+xml;charset=utf-8,' +
|
|
encodeURIComponent(
|
|
'<svg xmlns="http://www.w3.org/2000/svg" width="' + (svgWidth) + '" height="' + (svgHeight) + '">' +
|
|
'<rect x="' + rectX + '" y="' + rectY + '" rx="4" ry="4" width="' + (rectWidth) + '" height="' + (rectHeight) + '" fill="#ffdf3f" stroke="#ffc93f" stroke-width="' + (rectBorderWidth) + '" style="opacity:0.5"/>' +
|
|
'<text x="' + textX + '" y="' + textY + '" font-family="' + fontFamily + '" font-size="' + (fontSize) + '" fill="black" text-anchor="middle" dominant-baseline="middle">' + text + '</text>' +
|
|
'</svg>'
|
|
)
|
|
}
|
|
|
|
const options = {
|
|
interaction: {
|
|
hover: true,
|
|
hoverConnectedEdges: true,
|
|
multiselect: true
|
|
},
|
|
nodes: {
|
|
shape: 'image',
|
|
brokenImage: brokenImage ?? '',
|
|
size: 35,
|
|
font: {
|
|
multi: 'md',
|
|
face: 'helvetica',
|
|
color:
|
|
document.documentElement.dataset.netboxColorMode === 'dark'
|
|
? '#fff'
|
|
: '#000'
|
|
}
|
|
},
|
|
edges: {
|
|
length: 100,
|
|
width: 2,
|
|
font: {
|
|
face: 'helvetica'
|
|
},
|
|
shadow: {
|
|
enabled: true
|
|
}
|
|
},
|
|
physics: {
|
|
solver: 'forceAtlas2Based'
|
|
}
|
|
}
|
|
|
|
// Render vis graph
|
|
let graph = null // vis graph instance
|
|
|
|
const container = document.querySelector('#visgraph')
|
|
const coordSaveCheckbox = document.querySelector('#id_save_coords')
|
|
;(function handleLoadData() {
|
|
if (!topologyData) return
|
|
|
|
function htmlTitle(text) {
|
|
const container = document.createElement('div')
|
|
container.innerHTML = text
|
|
return container
|
|
}
|
|
|
|
const nodes = new DataSet(
|
|
topologyData.nodes.map((node) => ({
|
|
...node,
|
|
title: htmlTitle(node.title)
|
|
}))
|
|
)
|
|
|
|
// make nodes object available globally in order to update their physics and positions later
|
|
window.nodes = nodes;
|
|
|
|
const edges = new DataSet(
|
|
topologyData.edges.map((node) => ({
|
|
...node,
|
|
title: htmlTitle(node.title),
|
|
...(node.drawTerminationLabel && {
|
|
arrows: {
|
|
from: {
|
|
enabled: true,
|
|
type: "image",
|
|
src: generatePortSVG(node.cable_a_name)
|
|
},
|
|
to: {
|
|
enabled: true,
|
|
type: "image",
|
|
src: generatePortSVG(node.cable_b_name)
|
|
}
|
|
}
|
|
})
|
|
}))
|
|
)
|
|
|
|
const group_sites = topologyData.options.group_sites
|
|
const group_locations = topologyData.options.group_locations
|
|
const group_racks = topologyData.options.group_racks
|
|
const group_virtualchassis = topologyData.options.group_virtualchassis
|
|
|
|
const gridSize = parseInt(topologyData.options.grid_size[0]);
|
|
var dragMode = false;
|
|
|
|
graph = new Network(container, { nodes, edges }, options)
|
|
graph.fit()
|
|
|
|
function getGridPosition(nodeId, gridSize) {
|
|
x = graph.getPosition(nodeId).x;
|
|
y = graph.getPosition(nodeId).y;
|
|
|
|
if(x >= 0) {
|
|
if((x % gridSize) > (gridSize / 2)) {
|
|
x += gridSize;
|
|
}
|
|
}
|
|
else {
|
|
if((-x % gridSize) > (gridSize / 2)) {
|
|
x -= gridSize;
|
|
}
|
|
}
|
|
x = x - x % gridSize;
|
|
|
|
if(y >= 0) {
|
|
if((y % gridSize) > (gridSize / 2)) {
|
|
y += gridSize;
|
|
}
|
|
}
|
|
else {
|
|
if((-y % gridSize) > (gridSize / 2)) {
|
|
y -= gridSize;
|
|
}
|
|
}
|
|
y = y - y % gridSize;
|
|
|
|
return {
|
|
x: x,
|
|
y: y
|
|
};
|
|
}
|
|
|
|
function drawGrid(canvascontext) {
|
|
// Canvas can be zoomed. It then contains more or less virtual pixels than the real number of pixels
|
|
const zoomFactor = graph.getScale() * window.devicePixelRatio;
|
|
const virtualWidth = canvascontext.canvas.width / zoomFactor;
|
|
const virtualHeight = canvascontext.canvas.height / zoomFactor;
|
|
|
|
// Canvas can be moved. Get the center of the virtual canvas. Take the grid into account
|
|
const virtualCenter = graph.getViewPosition();
|
|
const rasterizedCenterX = virtualCenter.x - virtualCenter.x % gridSize;
|
|
const rasterizedCenterY = virtualCenter.y - virtualCenter.y % gridSize;
|
|
|
|
// Calculate virtual space for the grid
|
|
const hSpace = (virtualWidth / 2) - (virtualWidth / 2) % gridSize + gridSize;
|
|
const vSpace = (virtualHeight / 2) - (virtualHeight / 2) % gridSize + gridSize;
|
|
|
|
// Calculate virtual position for the grid
|
|
const left = rasterizedCenterX - gridSize - hSpace;
|
|
const right = rasterizedCenterX + gridSize + hSpace;
|
|
const top = rasterizedCenterY - gridSize - vSpace;
|
|
const bottom = rasterizedCenterY + gridSize + vSpace;
|
|
|
|
// Draw grid
|
|
canvascontext.beginPath();
|
|
|
|
for (let x = left; x < right; x += gridSize) {
|
|
canvascontext.moveTo(x, top);
|
|
canvascontext.lineTo(x, bottom);
|
|
}
|
|
|
|
for (let y = top; y < bottom; y += gridSize) {
|
|
canvascontext.moveTo(left, y);
|
|
canvascontext.lineTo(right, y);
|
|
}
|
|
|
|
canvascontext.strokeStyle = '#777777';
|
|
canvascontext.stroke();
|
|
}
|
|
|
|
function drawGridSnapHint(canvascontext) {
|
|
// Draw grid hinting line and circle
|
|
if(gridSize > 0 && dragMode == true && graph.getSelectedNodes().length > 0) {
|
|
for(i = 0; i < graph.getSelectedNodes().length; i++) {
|
|
id = graph.getSelectedNodes()[i];
|
|
if(window.nodes.get(id).x != graph.getPosition(id).x || window.nodes.get(id).y != graph.getPosition(id).y) {
|
|
pos = getGridPosition(graph.getSelectedNodes()[i], gridSize);
|
|
|
|
canvascontext.beginPath();
|
|
canvascontext.arc(graph.getPosition(graph.getSelectedNodes()[i]).x, graph.getPosition(graph.getSelectedNodes()[i]).y, 5, 0, 2 * Math.PI);
|
|
canvascontext.fillStyle = '#FF3D3D';
|
|
canvascontext.fill();
|
|
|
|
canvascontext.beginPath();
|
|
canvascontext.moveTo(graph.getPosition(graph.getSelectedNodes()[i]).x, graph.getPosition(graph.getSelectedNodes()[i]).y);
|
|
canvascontext.lineTo(pos.x, pos.y);
|
|
canvascontext.strokeStyle = '#FF3D3D';
|
|
canvascontext.stroke();
|
|
|
|
canvascontext.beginPath();
|
|
canvascontext.arc(pos.x, pos.y, 10, 0, 2 * Math.PI);
|
|
canvascontext.fillStyle = '#9C0000';
|
|
canvascontext.fill();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
graph.on('dragStart', (params) => {
|
|
dragMode = true;
|
|
})
|
|
|
|
graph.on('dragEnd', (params) => {
|
|
dragMode = false;
|
|
// Place icon on the grid
|
|
if(gridSize > 0 && graph.getSelectedNodes().length > 0) {
|
|
for(i = 0; i < graph.getSelectedNodes().length; i++) {
|
|
id = graph.getSelectedNodes()[i];
|
|
if(window.nodes.get(id).x != graph.getPosition(id).x || window.nodes.get(id).y != graph.getPosition(id).y) {
|
|
pos = getGridPosition(graph.getSelectedNodes()[i], gridSize);
|
|
window.nodes.update({id: graph.getSelectedNodes()[i], x: pos.x, y: pos.y});
|
|
}
|
|
}
|
|
}
|
|
|
|
if (coordSaveCheckbox.options[coordSaveCheckbox.selectedIndex].text != "Yes") return
|
|
|
|
Promise.allSettled(
|
|
Object.entries(graph.getPositions(params.nodes)).map(
|
|
async ([nodeId, nodePosition]) => {
|
|
if(!isNaN(parseInt(nodeId))) {
|
|
nodeKey = parseInt(nodeId);
|
|
}
|
|
else {
|
|
nodeKey = nodeId;
|
|
}
|
|
|
|
try {
|
|
window.nodes.update({id: nodeKey, physics: false, x: nodePosition.x, y: nodePosition.y});
|
|
}
|
|
catch (e) {
|
|
console.log([
|
|
'Error while executing window.nodes.update()',
|
|
'nodeId: ' + nodeId,
|
|
'nodeKey: ' + nodeKey,
|
|
'x: ' + nodePosition.x,
|
|
'y: ' + nodePosition.y
|
|
]);
|
|
console.log(e);
|
|
}
|
|
const res = await fetch(
|
|
'/' + basePath + 'api/plugins/netbox_topology_views/save-coords/save_coords/',
|
|
{
|
|
method: 'PATCH',
|
|
headers: {
|
|
'X-CSRFToken': window.CSRF_TOKEN,
|
|
Accept: 'application/json',
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
node_id: nodeId,
|
|
x: nodePosition.x,
|
|
y: nodePosition.y,
|
|
group: topologyData.group
|
|
})
|
|
}
|
|
)
|
|
}
|
|
)
|
|
)
|
|
})
|
|
|
|
graph.on('doubleClick', (params) => {
|
|
if (params.nodes.length > 0) {
|
|
params.nodes.forEach((node) => {
|
|
window.open(nodes.get(node).href, '_blank')
|
|
})
|
|
}
|
|
else {
|
|
params.edges.forEach((edge) => {
|
|
window.open(edges.get(edge).href, '_blank')
|
|
})
|
|
}
|
|
})
|
|
|
|
graph.on('beforeDrawing', (canvascontext) => {
|
|
if (gridSize > 0) {
|
|
drawGrid(canvascontext);
|
|
}
|
|
})
|
|
|
|
graph.on('afterDrawing', (canvascontext) => {
|
|
allRectangles = [];
|
|
if(group_sites != null && group_sites == 'on') { drawGroupRectangles(canvascontext, groupedNodeSites, siteRectParams); }
|
|
if(group_locations != null && group_locations == 'on') { drawGroupRectangles(canvascontext, groupedNodeLocations, locationRectParams); }
|
|
if(group_racks != null && group_racks == 'on') { drawGroupRectangles(canvascontext, groupedNodeRacks, rackRectParams); }
|
|
if(group_virtualchassis != null && group_virtualchassis == 'on') { drawGroupRectangles(canvascontext, groupedNodeVirtualchassis, virtualchassisRectParams); }
|
|
|
|
drawGridSnapHint(canvascontext);
|
|
})
|
|
|
|
graph.on('click', (canvascontext) => {
|
|
allRectangles.forEach(key => {
|
|
// Is the mouse pointer inside of the current rectangle?
|
|
if(canvascontext.pointer.canvas.x > (key.x1 - key.border / 2 - 3) && canvascontext.pointer.canvas.x < (key.x2 + key.border / 2 + 3)
|
|
&& canvascontext.pointer.canvas.y > (key.y1 - key.border / 2 - 3) && canvascontext.pointer.canvas.y < (key.y2 + key.border / 2 + 3)) {
|
|
// We just want to react when the border has been clicked, not the whole rectangle
|
|
if (canvascontext.pointer.canvas.x < (key.x1 + key.border / 2 + 3) || canvascontext.pointer.canvas.x > (key.x2 - key.border / 2 - 3)
|
|
|| canvascontext.pointer.canvas.y < (key.y1 + key.border / 2 + 3) || canvascontext.pointer.canvas.y > (key.y2 - key.border / 2 - 3)) {
|
|
// Generate an array of affected nodes in order to pass it to the select.Nodes() function
|
|
let arr = [];
|
|
if(key.category == "Site") {
|
|
groupedNodeSites.forEach(subArray => {
|
|
subArray.forEach(element => {
|
|
if (element[1] == key.id) {
|
|
arr.push(element[0]);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
if(key.category == "Location") {
|
|
groupedNodeLocations.forEach(subArray => {
|
|
subArray.forEach(element => {
|
|
if (element[1] === key.id) {
|
|
arr.push(element[0]);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
if(key.category == "Rack") {
|
|
groupedNodeRacks.forEach(subArray => {
|
|
subArray.forEach(element => {
|
|
if (element[1] === key.id) {
|
|
arr.push(element[0]);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
if(key.category == "Virtual Chassis") {
|
|
groupedNodeVirtualchassis.forEach(subArray => {
|
|
subArray.forEach(element => {
|
|
if (element[1] === key.id) {
|
|
arr.push(element[0]);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
graph.selectNodes(arr);
|
|
}
|
|
}
|
|
});
|
|
})
|
|
|
|
// Add information on which node belongs to which group (site/location/rack/virtualchassis).
|
|
// Create an array for each group in order to loop through that arrays later
|
|
function combineNodeInfo(typeId, type) {
|
|
let nodesArray = [];
|
|
// Extract node ids and node type ids from all nodes
|
|
for (let [key, value] of nodes._data) {
|
|
if (value[typeId] != undefined) {
|
|
nodesArray.push([value.id, value[typeId], value[type], value.label_num_lines]);
|
|
}
|
|
}
|
|
// Split single array above into arrays grouped by node id
|
|
let groupedNodeArray = nodesArray.reduce((acc, value) => {
|
|
let key = value[1]; // node id
|
|
acc[key] = acc[key] || [];
|
|
acc[key].push(value);
|
|
return acc;
|
|
}, {});
|
|
|
|
return Object.values(groupedNodeArray);
|
|
}
|
|
|
|
var allRectangles = [];
|
|
/* Draw a single rectangle with given parameters
|
|
rectangle expects an object that consists of the following keys:
|
|
ctx: canvas context on which the rectangle should be drawn
|
|
x: x-coordinate of top left point of the rectangle
|
|
y: y-coordinate of top left point of the rectangle
|
|
width: width of rectangle
|
|
height: height of rectangle
|
|
lineWidth: border width
|
|
color: border color
|
|
text: a string to be placed where you want it to be
|
|
textPaddingX: x-position of the text
|
|
textPaddingY: y-position of the text
|
|
font: text font */
|
|
function drawGroupRectangle(rectangle) {
|
|
// Draw rectangle
|
|
rectangle.ctx.beginPath();
|
|
rectangle.ctx.lineWidth = rectangle.lineWidth;
|
|
rectangle.ctx.strokeStyle = rectangle.color;
|
|
rectangle.ctx.rect(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
|
|
rectangle.ctx.stroke();
|
|
// Draw text
|
|
rectangle.ctx.font = rectangle.font;
|
|
rectangle.ctx.fillStyle = rectangle.color;
|
|
rectangle.ctx.fillText(rectangle.text, rectangle.x + rectangle.textPaddingX, rectangle.y + rectangle.textPaddingY);
|
|
|
|
allRectangles.push({category: rectangle.category, id: rectangle.id, x1: rectangle.x, y1: rectangle.y, x2: rectangle.x + rectangle.width, y2: rectangle.y + rectangle.height, border: rectangle.lineWidth})
|
|
}
|
|
|
|
/* Draw all rectangles of a given group (site/location//virtualchassis)
|
|
rectParams expects an object that consists of the following keys:
|
|
lineWidth: border width (string)
|
|
color: border color (string)
|
|
paddingX: rectangle x-padding, calculated from the center of a node (int)
|
|
paddingY: rectangle y-padding, calculated from the center of a node (int)
|
|
textPaddingX: text x-padding, calculated from the lower left point of the text (int)
|
|
textPaddingY: text y-padding, calculated from the lower left point of the text (int)
|
|
font: css-like font size and font (string) */
|
|
function drawGroupRectangles(canvascontext, groupedNodes, rectParams) {
|
|
for(let value of Object.entries(groupedNodes)) {
|
|
const rectangles = [];
|
|
const xValues = [];
|
|
const yValues = [];
|
|
const yValuesWithLabel = [];
|
|
const labelLineHeight = 16;
|
|
|
|
// Get coordinates for every node in a given group
|
|
for(let val of value[1]) {
|
|
xValues.push(graph.getPosition(val[0]).x);
|
|
yValues.push(graph.getPosition(val[0]).y);
|
|
yValuesWithLabel.push(yValues[yValues.length -1] + val[3] * labelLineHeight);
|
|
}
|
|
|
|
const minX = Math.min(...xValues);
|
|
const maxX = Math.max(...xValues);
|
|
const minY = Math.min(...yValues);
|
|
const maxY = Math.max(...yValuesWithLabel);
|
|
const rectX = minX - rectParams.paddingX;
|
|
const rectY = minY - rectParams.paddingY;
|
|
const rectSizeX = maxX - minX + 2*rectParams.paddingX;
|
|
const rectSizeY = maxY - minY + 2*rectParams.paddingY;
|
|
|
|
rectangles.push({
|
|
ctx: canvascontext,
|
|
x: rectX,
|
|
y: rectY,
|
|
width: rectSizeX,
|
|
height: rectSizeY,
|
|
lineWidth: rectParams.lineWidth,
|
|
color: rectParams.color,
|
|
text: value[1][0][2],
|
|
textPaddingX: rectParams.textPaddingX,
|
|
textPaddingY: rectParams.textPaddingY,
|
|
font: rectParams.font,
|
|
id: value[1][0][1],
|
|
category: rectParams.category
|
|
});
|
|
|
|
rectangles.forEach(function(rectangle) {
|
|
drawGroupRectangle(rectangle);
|
|
});
|
|
}
|
|
}
|
|
|
|
let groupedNodeSites = combineNodeInfo('site_id', 'site');
|
|
let siteRectParams = {
|
|
lineWidth: "5",
|
|
color: "red",
|
|
paddingX: 84,
|
|
paddingY: 84,
|
|
textPaddingX: 8,
|
|
textPaddingY: -8,
|
|
font: "14px helvetica",
|
|
category: "Site"
|
|
}
|
|
|
|
let groupedNodeLocations = combineNodeInfo('location_id', 'location');
|
|
let locationRectParams = {
|
|
lineWidth: "5",
|
|
color: "#337ab7",
|
|
paddingX: 77,
|
|
paddingY: 77,
|
|
textPaddingX: 22,
|
|
textPaddingY: 29,
|
|
font: "14px helvetica",
|
|
category: "Location"
|
|
}
|
|
|
|
let groupedNodeRacks = combineNodeInfo('rack_id', 'rack');
|
|
let rackRectParams = {
|
|
lineWidth: "5",
|
|
color: "green",
|
|
paddingX: 70,
|
|
paddingY: 70,
|
|
textPaddingX: 15,
|
|
textPaddingY: 36,
|
|
font: "14px helvetica",
|
|
category: "Rack"
|
|
}
|
|
|
|
let groupedNodeVirtualchassis = combineNodeInfo('virtual_chassis_id', 'virtual_chassis');
|
|
let virtualchassisRectParams = {
|
|
lineWidth: "5",
|
|
color: "orange",
|
|
paddingX: 63,
|
|
paddingY: 63,
|
|
textPaddingX: 8,
|
|
textPaddingY: 43,
|
|
font: "14px helvetica",
|
|
category: "Virtual Chassis"
|
|
}
|
|
})()
|
|
|
|
// Download Graph
|
|
const MIME_TYPE = 'image/png'
|
|
|
|
const downloadButton = document.querySelector('#btnDownloadImage')
|
|
downloadButton.addEventListener('click', (e) => {
|
|
performGraphDownload()
|
|
})
|
|
|
|
function performGraphDownload() {
|
|
const canvas = container.querySelector('canvas')
|
|
const tempDownloadLink = document.createElement('a')
|
|
const generatedImageUrl = canvas.toDataURL(MIME_TYPE)
|
|
|
|
tempDownloadLink.href = generatedImageUrl
|
|
tempDownloadLink.download = 'topology'
|
|
document.body.appendChild(tempDownloadLink)
|
|
tempDownloadLink.click()
|
|
document.body.removeChild(tempDownloadLink)
|
|
}
|
|
|
|
// Download XML
|
|
const downloadXmlButton = document.querySelector('#btnDownloadXml')
|
|
downloadXmlButton.addEventListener('click', (e) => {
|
|
performXmlDownload()
|
|
})
|
|
|
|
function performXmlDownload() {
|
|
|
|
const tempDownloadLink = document.createElement('a');
|
|
|
|
let xml_search_options = '';
|
|
|
|
if (typeof is_htmx !== 'undefined') {
|
|
var curr_url = window.location.href;
|
|
const sites_prefix = '/sites/'
|
|
const location_prefix = '/locations/'
|
|
if (curr_url.includes(sites_prefix)) {
|
|
var site_id = curr_url.split(sites_prefix)[1];
|
|
site_id = site_id.split('/')[0]
|
|
xml_search_options = 'site_id=' + site_id + '&show_cables=True&show_unconnected=True'
|
|
}
|
|
else if (curr_url.includes(location_prefix)) {
|
|
var location_id = curr_url.split(location_prefix)[1];
|
|
location_id = location_id.split('/')[0]
|
|
xml_search_options = 'location_id=' + location_id + '&show_cables=True&show_unconnected=True'
|
|
}
|
|
}
|
|
else {
|
|
xml_search_options = new URLSearchParams(window.location.search);
|
|
}
|
|
|
|
|
|
|
|
fetch('/' + basePath + 'api/plugins/netbox_topology_views/xml-export/?' + xml_search_options).then(response => response.text())
|
|
.then(data => {
|
|
var blob = new Blob([data ], { type: "text/plain" });
|
|
|
|
tempDownloadLink.setAttribute("href", window.URL.createObjectURL(blob));
|
|
tempDownloadLink.setAttribute("download", 'topology.xml');
|
|
|
|
tempDownloadLink.dataset.downloadurl = ["text/plain", tempDownloadLink.download, tempDownloadLink.href].join(":");
|
|
|
|
tempDownloadLink.click();
|
|
|
|
});
|
|
}
|
|
|
|
// Theme switching
|
|
const observer = new MutationObserver((mutations) =>
|
|
mutations.forEach((mutation) => {
|
|
if (
|
|
!graph ||
|
|
mutation.type !== 'attributes' ||
|
|
mutation.attributeName !== 'data-bs-theme' ||
|
|
!(mutation.target instanceof HTMLElement)
|
|
)
|
|
return
|
|
const netboxColorMode = mutation.target.dataset.bsTheme
|
|
options.nodes.font.color = netboxColorMode === 'dark' ? '#fff' : '#000'
|
|
graph.setOptions(options)
|
|
})
|
|
)
|
|
|
|
observer.observe(document.body, {
|
|
attributes: true,
|
|
attributeFilter: ['data-bs-theme']
|
|
})
|