smart-labels 0.0.1

package/dist/smartLabels.js

@@ -0,0 +1,483 @@
+// smart-labels v0.0.1 Copyright (c) 2024 John Alexis Guerra Gómez
+(function (global, factory) {
+typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('d3')) :
+typeof define === 'function' && define.amd ? define(['exports', 'd3'], factory) :
+(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.smartLabels = global.smartLabels || {}, global.d3));
+})(this, (function (exports, d3) { 'use strict';
+
+function _interopNamespaceDefault(e) {
+var n = Object.create(null);
+if (e) {
+Object.keys(e).forEach(function (k) {
+if (k !== 'default') {
+var d = Object.getOwnPropertyDescriptor(e, k);
+Object.defineProperty(n, k, d.get ? d : {
+enumerable: true,
+get: function () { return e[k]; }
+});
+}
+});
+}
+n.default = e;
+return Object.freeze(n);
+}
+
+var d3__namespace = /*#__PURE__*/_interopNamespaceDefault(d3);
+
+// Based on https://observablehq.com/@d3/voronoi-labels by Mike Bostock
+
+// ISC License
+
+// Copyright 2018–2023 Observable, Inc.
+// Permission to use, copy, modify, and/or distribute this software for any
+// purpose with or without fee is hereby granted, provided that the above
+// copyright notice and this permission notice appear in all copies.
+
+// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+// WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+// MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+// ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+// WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+// ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+// OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+function smartLabels(
+  data,
+  {
+    x = (d) => d[0], // x coordinate accessor, expected to be in pixels
+    y = (d) => d[1], // y coordinate accessor, expected to be in pixels
+    label = (d, i) => i, // Accessor for the label
+    fill = "#333", // label fill color
+    stroke = "white", // label stroke color
+    threshold = 2000, // Areas over this size would get labels
+    width = null,
+    height = null,
+    target = null, // Where do you want it to draw
+    font = "10px sans-serif",
+    hover = true, // Show label of the hovered point
+    onHover = (i) => i, // callback when hovered, will pass the index of the selected element
+    hoverFont = "bolder 12px sans-serif",
+    labelsInCentroids = true,
+
+    backgroundFill = "#fefefe01", // What to paint the bg rect of the labels. Needed for the onHover
+    strokeWidth = 5,
+
+    showVoronoi = false,
+    voronoiStroke = "#ccc",
+
+    showAnchors = false,
+    anchorsStroke = "orange",
+    anchorsFill = "none",
+
+    useOcclusion = true,
+    occludedStyle = "opacity: 0.2", // css style rules to be used on occluded labels
+
+    // For debugging
+    showPoints = false,
+    pointsFill = "#ccc",
+    pointsSelectedFill = "firebrick",
+    pointsStroke = "#ccc",
+    renderer = "svg",
+    debug = false,
+  } = {}
+) {
+  data = data.filter(
+    (d) =>
+      x(d) !== undefined && x(d) !== null && y(d) !== undefined && y(d) !== null
+  );
+
+  let xExtent = d3__namespace.extent(data, x),
+    yExtent = d3__namespace.extent(data, y);
+  width = width || xExtent[1] - xExtent[0];
+  height = height || yExtent[1] - yExtent[0];
+
+  if (debug) console.log("✅ smartLabels renderer", renderer);
+  if (renderer.toLocaleLowerCase() === "canvas") {
+    target =
+      d3__namespace.select(target) ||
+      d3__namespace.create("canvas").attr("width", width).attr("height", height);
+    useOcclusion = false;
+  } else {
+    target = target || d3__namespace.create("svg").attr("viewBox", [0, 0, width, height]);
+  }
+
+  const delaunay = d3__namespace.Delaunay.from(data, x, y);
+  const voronoi = delaunay.voronoi([
+    xExtent[0] - 1,
+    yExtent[0] - 1,
+    xExtent[1] + 1,
+    yExtent[1] + 1,
+  ]);
+
+  let cells = data.map((d, i) => [d, voronoi.cellPolygon(i)]);
+  // Replace null cells with the nearest one
+  cells = cells
+    .map(([d, cell]) => [d, getNearestCell(d, cell)])
+    .map(([d, cell]) => ({ d, cell, show: -d3__namespace.polygonArea(cell) > threshold }));
+
+  // cells can be null when we have duplicated coords
+  // https://github.com/d3/d3-delaunay/issues/106
+  function getNearestCell(d, cell) {
+    if (!cell) {
+      const i = delaunay.find(x(d), y(d));
+      if (i === -1) {
+        console.log("couldn't find cell", i, d, x(d), y(d));
+        return null;
+      }
+      cell = cells[i][1];
+    }
+    return cell;
+  }
+
+  function renderSVG() {
+    let anchors = null;
+    if (useOcclusion) {
+      target
+        .selectAll("style.smartLabels")
+        .data([0])
+        .join("style")
+        .attr("class", "smartLabels").html(`
+        svg g.labels > text.occluded:not(.selected) { ${occludedStyle} }
+    `);
+    }
+
+    const mouseRect = target
+      .selectAll("rect.smartLabels")
+      .data([0])
+      .join("rect")
+      .attr("class", "smartLabels")
+      .attr("width", width)
+      .attr("height", height)
+      .attr("fill", backgroundFill)
+      .attr("stroke", "none");
+
+    const orient = {
+      top: (text) => text.attr("text-anchor", "middle").attr("y", -6),
+      right: (text) =>
+        text.attr("text-anchor", "start").attr("dy", "0.35em").attr("x", 6),
+      bottom: (text) =>
+        text.attr("text-anchor", "middle").attr("dy", "0.71em").attr("y", 6),
+      left: (text) =>
+        text.attr("text-anchor", "end").attr("dy", "0.35em").attr("x", -6),
+    };
+
+    if (showAnchors || labelsInCentroids) {
+      anchors = target
+        .selectAll("g#anchors")
+        .data([cells])
+        .join("g")
+        .attr("pointer-events", "none")
+        .attr("id", "anchors")
+        .attr("stroke", anchorsStroke)
+        .attr("fill", anchorsFill)
+        .selectAll("path.anchor")
+        .data((d) => d)
+        .join("path")
+        .attr("class", "anchor")
+        .attr("display", ({ show }) => (show ? null : "none"))
+        .attr("d", ({ d, cell }) =>
+          cell ? `M${d3__namespace.polygonCentroid(cell)}L${x(d)},${y(d)}` : null
+        );
+    }
+
+    if (showVoronoi) {
+      target
+        .selectAll("path#voronoi")
+        .data([1])
+        .join("path")
+        .attr("id", "voronoi")
+        .attr("stroke", voronoiStroke)
+        .attr("pointer-events", "none")
+        .attr("d", voronoi.render());
+    }
+
+    let points;
+    if (showPoints) {
+      points = target
+        .selectAll("circle#points")
+        .data([1])
+        .join("path")
+        .attr("id", "points")
+        .attr("pointer-events", "none")
+        .attr("stroke", pointsStroke)
+        .attr("fill", pointsFill)
+        .attr("d", delaunay.renderPoints(null, 2));
+    }
+
+    const labels = target
+      .selectAll("g.labels")
+      .data([cells])
+      .join("g")
+      .attr("class", "labels")
+      .attr("fill", fill)
+
+      .attr("stroke", stroke)
+      .attr("stroke-width", strokeWidth)
+      .attr("paint-order", "stroke")
+      .attr("pointer-events", "none")
+      .selectAll("text")
+      .data((d) => d)
+      .join("text")
+      .style("font", font)
+      .each(function ({ d, cell }) {
+        if (!cell) return;
+        const [cx, cy] = d3__namespace.polygonCentroid(cell);
+        const angle =
+          (Math.round((Math.atan2(cy - y(d), cx - x(d)) / Math.PI) * 2) + 4) %
+          4;
+
+        d3__namespace.select(this).call(
+          angle === 0
+            ? orient.right
+            : angle === 3
+              ? orient.top
+              : angle === 1
+                ? orient.bottom
+                : orient.left
+        );
+      })
+      .attr("transform", ({ d, cell }) => {
+        if (labelsInCentroids) {
+          const [cx, cy] = d3__namespace.polygonCentroid(cell);
+
+          return `translate(${cx}, ${cy})`;
+        } else {
+          return `translate(${x(d)}, ${y(d)})`;
+        }
+      })
+      .attr("display", ({ show }) => (show ? null : "none"))
+      .text(({ d }, i, all) => label(d, i, all));
+
+    let selected = null;
+    if (hover) {
+      mouseRect.on("mousemove", (event) => {
+        // Find the selected point
+        const i = delaunay.find(...d3__namespace.pointer(event));
+        if (i === selected) return;
+        selected = i;
+
+        // Update labels
+        labels
+          .attr("display", ({ show }, i) =>
+            i === selected || show ? null : "none"
+          )
+          .style("font", (_, i) => (i === selected ? hoverFont : font))
+          .classed("selected", (_, i) => i === selected)
+          .filter((_, i) => i === selected)
+          .raise();
+
+        anchors &&
+          anchors.attr("display", ({ show }, i) =>
+            show || i === selected ? null : "none"
+          );
+
+        if (showPoints) {
+          points
+            .attr("fill", (_, i) =>
+              i === selected ? pointsSelectedFill : pointsSelectedFill
+            )
+            .classed("selected", (_, i) => i === selected);
+        }
+
+        if (onHover && typeof onHover === "function") onHover(i);
+      });
+    }
+
+    // Setup a MutationObserver to wait for the element to be rendered
+    // https://stackoverflow.com/questions/15875128/is-there-element-rendered-event
+    if (useOcclusion) {
+      const observer = new MutationObserver(function () {
+        if (document.contains(target.node())) {
+          target.call(occlusion, "g.labels > text");
+          observer.disconnect();
+        }
+      });
+
+      observer.observe(document, {
+        attributes: false,
+        childList: true,
+        characterData: false,
+        subtree: true,
+      });
+    }
+  } // renderSVG
+
+  function renderCanvas() {
+    const context = target.node().getContext("2d");
+    // const ratio = window.devicePixelRatio || 1;
+    // target.attr("width", width * ratio).attr("height", height * ratio);
+    // context.scale(ratio, ratio);
+    // context.clearRect(0, 0, width, height);
+
+    if (showAnchors || labelsInCentroids) {
+      cells.forEach(({ d, cell, show }) => {
+        if (!show) return;
+        const [cx, cy] = d3__namespace.polygonCentroid(cell);
+        context.beginPath();
+        context.moveTo(cx, cy);
+        context.lineTo(x(d), y(d));
+        context.strokeStyle = anchorsStroke;
+        context.stroke();
+      });
+    }
+
+    if (showVoronoi) {
+      context.beginPath();
+      voronoi.render(context);
+      context.strokeStyle = voronoiStroke;
+      context.stroke();
+    }
+
+    if (showPoints) {
+      context.beginPath();
+      delaunay.renderPoints(context, 2);
+      context.fillStyle = pointsFill;
+      context.fill();
+      context.strokeStyle = pointsStroke;
+      context.stroke();
+    }
+
+    cells.forEach(({ d, cell, show }) => {
+      if (!show) return;
+      const [cx, cy] = d3__namespace.polygonCentroid(cell);
+      const angle =
+        (Math.round((Math.atan2(cy - y(d), cx - x(d)) / Math.PI) * 2) + 4) % 4;
+
+      context.save();
+      context.translate(
+        labelsInCentroids ? cx : x(d),
+        labelsInCentroids ? cy : y(d)
+      );
+      context.textAlign =
+        angle === 0
+          ? "left"
+          : angle === 1
+            ? "center"
+            : angle === 2
+              ? "right"
+              : "center";
+      context.textBaseline =
+        angle === 0
+          ? "middle"
+          : angle === 1
+            ? "top"
+            : angle === 2
+              ? "middle"
+              : "bottom";
+      context.font = font;
+      context.fillStyle = fill;
+      context.strokeStyle = stroke;
+      context.lineWidth = strokeWidth;
+      context.strokeText(label(d), 0, 0);
+      context.fillText(label(d), 0, 0);
+      context.restore();
+    });
+
+    let selected = null;
+    if (hover) {
+      if (debug) console.log("setting onmousemove", target);
+
+      target.on("mousemove", (event) => {
+        const [mx, my] = d3__namespace.pointer(event);
+        const i = delaunay.find(mx, my);
+        if (i === selected) return;
+        selected = i;
+
+        context.clearRect(0, 0, width, height);
+        cells.forEach(({ d, cell, show }, index) => {
+          if (!show && index !== selected) return;
+          const [cx, cy] = d3__namespace.polygonCentroid(cell);
+          const angle =
+            (Math.round((Math.atan2(cy - y(d), cx - x(d)) / Math.PI) * 2) + 4) %
+            4;
+
+          context.save();
+          context.translate(
+            labelsInCentroids ? cx : x(d),
+            labelsInCentroids ? cy : y(d)
+          );
+          context.textAlign =
+            angle === 0
+              ? "left"
+              : angle === 1
+                ? "center"
+                : angle === 2
+                  ? "right"
+                  : "center";
+          context.textBaseline =
+            angle === 0
+              ? "middle"
+              : angle === 1
+                ? "top"
+                : angle === 2
+                  ? "middle"
+                  : "bottom";
+          context.font = index === selected ? hoverFont : font;
+          context.fillStyle = fill;
+          context.strokeStyle = stroke;
+          context.lineWidth = strokeWidth;
+          context.strokeText(label(d), 0, 0);
+          context.fillText(label(d), 0, 0);
+          context.restore();
+        });
+
+        if (onHover && typeof onHover === "function") onHover(i);
+      });
+    }
+  } // renderCanvas
+
+  if (renderer.toLocaleLowerCase() === "canvas") {
+    renderCanvas();
+  } else {
+    renderSVG();
+  }
+
+  return Object.assign(target.node(), { delaunay, voronoi, cells });
+}
+
+// https://observablehq.com/@d3/occlusion
+// ISC License
+
+// Copyright 2020-2023 Philippe Rivière
+// Permission to use, copy, modify, and/or distribute this software for any
+// purpose with or without fee is hereby granted, provided that the above
+// copyright notice and this permission notice appear in all copies.
+
+// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+// WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+// MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+// ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+// WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+// ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+// OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+function occlusion(svg, against = "text") {
+  const nodes = d3__namespace
+    .sort(svg.selectAll(against), (node) => +node.getAttribute("data-priority"))
+    .reverse()
+    .map((node) => {
+      const { x, y, width, height } = node.getBoundingClientRect();
+      return { node, x, y, width, height };
+    });
+
+  const visible = [];
+  for (const d of nodes) {
+    const occluded = visible.some((e) => intersectRect(d, e));
+    d3__namespace.select(d.node).classed("occluded", occluded);
+    if (!occluded) visible.push(d);
+  }
+  return visible;
+}
+
+// This intersection function works for rect and text, but not so much for circles.
+function intersectRect(a, b) {
+  return !(
+    a.x + a.width < b.x ||
+    b.x + b.width < a.x ||
+    a.y + a.height < b.y ||
+    b.y + b.height < a.y
+  );
+}
+
+exports.occlusion = occlusion;
+exports.smartLabels = smartLabels;
+
+}));

package/dist/smartLabels.min.js

@@ -0,0 +1,2 @@
+// smart-labels v0.0.1 Copyright (c) 2024 John Alexis Guerra Gómez
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("d3")):"function"==typeof define&&define.amd?define(["exports","d3"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).smartLabels=t.smartLabels||{},t.d3)}(this,(function(t,e){"use strict";function o(t){var e=Object.create(null);return t&&Object.keys(t).forEach((function(o){if("default"!==o){var n=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(e,o,n.get?n:{enumerable:!0,get:function(){return t[o]}})}})),e.default=t,Object.freeze(e)}var n=o(e);function l(t,e="text"){const o=n.sort(t.selectAll(e),(t=>+t.getAttribute("data-priority"))).reverse().map((t=>{const{x:e,y:o,width:n,height:l}=t.getBoundingClientRect();return{node:t,x:e,y:o,width:n,height:l}})),l=[];for(const t of o){const e=l.some((e=>{return n=e,!((o=t).x+o.width<n.x||n.x+n.width<o.x||o.y+o.height<n.y||n.y+n.height<o.y);var o,n}));n.select(t.node).classed("occluded",e),e||l.push(t)}return l}t.occlusion=l,t.smartLabels=function(t,{x:e=t=>t[0],y:o=t=>t[1],label:r=(t,e)=>e,fill:a="#333",stroke:s="white",threshold:i=2e3,width:c=null,height:d=null,target:h=null,font:f="10px sans-serif",hover:u=!0,onHover:p=t=>t,hoverFont:g="bolder 12px sans-serif",labelsInCentroids:y=!0,backgroundFill:m="#fefefe01",strokeWidth:b=5,showVoronoi:x=!1,voronoiStroke:v="#ccc",showAnchors:k=!1,anchorsStroke:w="orange",anchorsFill:j="none",useOcclusion:A=!0,occludedStyle:L="opacity: 0.2",showPoints:S=!1,pointsFill:P="#ccc",pointsSelectedFill:C="firebrick",pointsStroke:M="#ccc",renderer:O="svg",debug:T=!1}={}){t=t.filter((t=>void 0!==e(t)&&null!==e(t)&&void 0!==o(t)&&null!==o(t)));let $=n.extent(t,e),F=n.extent(t,o);c=c||$[1]-$[0],d=d||F[1]-F[0],T&&console.log("✅ smartLabels renderer",O),"canvas"===O.toLocaleLowerCase()?(h=n.select(h)||n.create("canvas").attr("width",c).attr("height",d),A=!1):h=h||n.create("svg").attr("viewBox",[0,0,c,d]);const B=n.Delaunay.from(t,e,o),E=B.voronoi([$[0]-1,F[0]-1,$[1]+1,F[1]+1]);let I=t.map(((t,e)=>[t,E.cellPolygon(e)]));function D(t,n){if(!n){const l=B.find(e(t),o(t));if(-1===l)return console.log("couldn't find cell",l,t,e(t),o(t)),null;n=I[l][1]}return n}return I=I.map((([t,e])=>[t,D(t,e)])).map((([t,e])=>({d:t,cell:e,show:-n.polygonArea(e)>i}))),"canvas"===O.toLocaleLowerCase()?function(){const t=h.node().getContext("2d");(k||y)&&I.forEach((({d:l,cell:r,show:a})=>{if(!a)return;const[s,i]=n.polygonCentroid(r);t.beginPath(),t.moveTo(s,i),t.lineTo(e(l),o(l)),t.strokeStyle=w,t.stroke()})),x&&(t.beginPath(),E.render(t),t.strokeStyle=v,t.stroke()),S&&(t.beginPath(),B.renderPoints(t,2),t.fillStyle=P,t.fill(),t.strokeStyle=M,t.stroke()),I.forEach((({d:l,cell:i,show:c})=>{if(!c)return;const[d,h]=n.polygonCentroid(i),u=(Math.round(Math.atan2(h-o(l),d-e(l))/Math.PI*2)+4)%4;t.save(),t.translate(y?d:e(l),y?h:o(l)),t.textAlign=0===u?"left":1===u?"center":2===u?"right":"center",t.textBaseline=0===u?"middle":1===u?"top":2===u?"middle":"bottom",t.font=f,t.fillStyle=a,t.strokeStyle=s,t.lineWidth=b,t.strokeText(r(l),0,0),t.fillText(r(l),0,0),t.restore()}));let l=null;u&&(T&&console.log("setting onmousemove",h),h.on("mousemove",(i=>{const[h,u]=n.pointer(i),m=B.find(h,u);m!==l&&(l=m,t.clearRect(0,0,c,d),I.forEach((({d:i,cell:c,show:d},h)=>{if(!d&&h!==l)return;const[u,p]=n.polygonCentroid(c),m=(Math.round(Math.atan2(p-o(i),u-e(i))/Math.PI*2)+4)%4;t.save(),t.translate(y?u:e(i),y?p:o(i)),t.textAlign=0===m?"left":1===m?"center":2===m?"right":"center",t.textBaseline=0===m?"middle":1===m?"top":2===m?"middle":"bottom",t.font=h===l?g:f,t.fillStyle=a,t.strokeStyle=s,t.lineWidth=b,t.strokeText(r(i),0,0),t.fillText(r(i),0,0),t.restore()})),p&&"function"==typeof p&&p(m))})))}():function(){let t=null;A&&h.selectAll("style.smartLabels").data([0]).join("style").attr("class","smartLabels").html(`\n        svg g.labels > text.occluded:not(.selected) { ${L} }\n    `);const i=h.selectAll("rect.smartLabels").data([0]).join("rect").attr("class","smartLabels").attr("width",c).attr("height",d).attr("fill",m).attr("stroke","none"),O={top:t=>t.attr("text-anchor","middle").attr("y",-6),right:t=>t.attr("text-anchor","start").attr("dy","0.35em").attr("x",6),bottom:t=>t.attr("text-anchor","middle").attr("dy","0.71em").attr("y",6),left:t=>t.attr("text-anchor","end").attr("dy","0.35em").attr("x",-6)};let T;(k||y)&&(t=h.selectAll("g#anchors").data([I]).join("g").attr("pointer-events","none").attr("id","anchors").attr("stroke",w).attr("fill",j).selectAll("path.anchor").data((t=>t)).join("path").attr("class","anchor").attr("display",(({show:t})=>t?null:"none")).attr("d",(({d:t,cell:l})=>l?`M${n.polygonCentroid(l)}L${e(t)},${o(t)}`:null))),x&&h.selectAll("path#voronoi").data([1]).join("path").attr("id","voronoi").attr("stroke",v).attr("pointer-events","none").attr("d",E.render()),S&&(T=h.selectAll("circle#points").data([1]).join("path").attr("id","points").attr("pointer-events","none").attr("stroke",M).attr("fill",P).attr("d",B.renderPoints(null,2)));const $=h.selectAll("g.labels").data([I]).join("g").attr("class","labels").attr("fill",a).attr("stroke",s).attr("stroke-width",b).attr("paint-order","stroke").attr("pointer-events","none").selectAll("text").data((t=>t)).join("text").style("font",f).each((function({d:t,cell:l}){if(!l)return;const[r,a]=n.polygonCentroid(l),s=(Math.round(Math.atan2(a-o(t),r-e(t))/Math.PI*2)+4)%4;n.select(this).call(0===s?O.right:3===s?O.top:1===s?O.bottom:O.left)})).attr("transform",(({d:t,cell:l})=>{if(y){const[t,e]=n.polygonCentroid(l);return`translate(${t}, ${e})`}return`translate(${e(t)}, ${o(t)})`})).attr("display",(({show:t})=>t?null:"none")).text((({d:t},e,o)=>r(t,e,o)));let F=null;if(u&&i.on("mousemove",(e=>{const o=B.find(...n.pointer(e));o!==F&&(F=o,$.attr("display",(({show:t},e)=>e===F||t?null:"none")).style("font",((t,e)=>e===F?g:f)).classed("selected",((t,e)=>e===F)).filter(((t,e)=>e===F)).raise(),t&&t.attr("display",(({show:t},e)=>t||e===F?null:"none")),S&&T.attr("fill",((t,e)=>C)).classed("selected",((t,e)=>e===F)),p&&"function"==typeof p&&p(o))})),A){const t=new MutationObserver((function(){document.contains(h.node())&&(h.call(l,"g.labels > text"),t.disconnect())}));t.observe(document,{attributes:!1,childList:!0,characterData:!1,subtree:!0})}}(),Object.assign(h.node(),{delaunay:B,voronoi:E,cells:I})}}));

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "smart-labels",
+  "version": "0.0.1",
+  "description": "A basic library for adding labels to a visualization when there is enough space",
+  "type": "module",
+  "main": "dist/smartLabels.min.js",
+  "module": "dist/smartLabels.es.js",
+  "browser": "dist/smartLabels.min.js",
+  "unpkg": "dist/smartLabels.min.js",
+  "jsdelivr": "dist/smartLabels.min.js",
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "pretest": "npm run build"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.14.0",
+    "@rollup/plugin-json": "^6.1.0",
+    "eslint": "^9.14.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-html": "^8.1.2",
+    "globals": "^15.12.0",
+    "prettier": "^3.3.3",
+    "rollup": "^4.20.0"
+  },
+  "dependencies": {
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "d3": "^7.9.0",
+    "rollup-plugin-ascii": "^0.0.3",
+    "rollup-plugin-commonjs": "^10.1.0"
+  },
+  "author": {
+    "name": "John Alexis Guerra Gómez",
+    "url": "https://johnguerra.co"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/john-guerra/smart-labels/issues"
+  },
+  "homepage": "https://github.com/john-guerra/smart-labels"
+}

package/rollup.config.js

@@ -0,0 +1,66 @@
+import { readFileSync } from "fs";
+import node from "@rollup/plugin-node-resolve";
+import commonjs from "rollup-plugin-commonjs";
+import terser from "@rollup/plugin-terser";
+// import babel from "rollup-plugin-babel";
+import json from "@rollup/plugin-json";
+import meta from "./package.json" assert { type: "json" };
+
+// Extract copyrights from the LICENSE.
+const copyrights = readFileSync("./LICENSE", "utf-8")
+  .split(/\n/g)
+  .filter((line) => /^copyright\s+/i.test(line))
+  .map((line) => line.replace(/^copyright\s+/i, ""));
+
+const filename = "smartLabels";
+
+// Observable Plot style
+const config = {
+  input: "src/index.js",
+  external: ["d3"],
+  output: {
+    indent: false,
+    banner: `// ${meta.name} v${meta.version} Copyright ${copyrights.join(", ")}`,
+    extend: true,
+    globals: {
+      "d3": "d3",    
+    },
+    name: "smartLabels",
+  },
+  plugins: [commonjs(), json(), node()],
+};
+
+export default [
+  {
+    ...config,
+    output: {
+      ...config.output,
+      format: "umd",
+      file: `dist/${filename}.js`,
+    },
+  },
+  {
+    ...config,
+    output: {
+      ...config.output,
+      format: "es",
+      file: `dist/${filename}.es.js`,
+    },
+  },
+  {
+    ...config,
+    output: {
+      ...config.output,
+      format: "umd",
+      file: `dist/${filename}.min.js`,
+    },
+    plugins: [
+      ...config.plugins,
+      terser({
+        output: {
+          preamble: config.output.banner,
+        },
+      }),
+    ],
+  },
+];