inputSVG = ({ value = [], svgElement = svg` `, selectables = ["rect"], selectedClass = "active", trackedAttribute = "id", panAndZoom = false } = {}) => { //Input capture on SVG function setValue(input, value) { input.value = value; input.dispatchEvent(new Event("input", { bubbles: true })); // Native events bubble, so we should too } const svg_ = d3.select(svgElement); const viewBox = svg_.attr("viewBox").split(" "); //Attach listeners selectables.forEach((selectable) => { svg_.selectAll(selectable).on("click", function (event) { event.stopPropagation(); //for overlayed elements let selection = d3.select(this); if (selection.classed(selectedClass)) { selection.classed(selectedClass, false); value = _.pull(value, selection.attr(trackedAttribute)); setValue(node, value); } else { selection.classed(selectedClass, true); value.push(selection.attr(trackedAttribute)); setValue(node, value); } }); }); const zoomG = svg_.select("g"); function zoomed({ transform }) { zoomG.attr("transform", transform); } if (panAndZoom && !zoomG.empty()) { svg_.attr("cursor", "grab"); svg_.call( d3 .zoom() .extent([ [0, 0], [viewBox[2], viewBox[3]] ]) .scaleExtent([0.5, 50]) .on("zoom", zoomed) ); } //wrap svg in

const node = htl.html`

${svgElement}

`; // Update the display whenever the value changes Object.defineProperty(node, "value", { get() { return value; }, set(v) { value = v; } }); // Set the initial value node.value = value; value.forEach((v) => { svg_.selectAll(`[${trackedAttribute}="${v}"]`).each(function (event) { let selection = d3.select(this); if (selection.classed(selectedClass)) { selection.classed(selectedClass, false); } else { selection.classed(selectedClass, true); } }); }); return node; }