smart-labels 0.0.13 → 0.0.14

package/{src/index.js → dist/smartLabels.cjs}

@@ -1,4 +1,27 @@
-import * as d3 from "d3";
+// smart-labels v0.0.14 Copyright (c) 2024 John Alexis Guerra Gómez
+'use strict';
+
+var d3 = require('d3');
+
+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
@@ -15,7 +38,7 @@ import * as d3 from "d3";
 // 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.
-export default function smartLabels(
+function smartLabels(
   data,
   {
     x = (d) => d[0], // x coordinate accessor, expected to be in pixels
@@ -35,7 +58,7 @@ export default function smartLabels(
     labelsInCentroids = true,
     threshold = 2000, // Areas over this size would get labels
     alwaysShow = (d) => false, // If returns true for the node, it will always show the label
-    showLabel = (d, cell) => alwaysShow(d) || -d3.polygonArea(cell) > threshold, // If true, show the label
+    showLabel = (d, cell) => alwaysShow(d) || -d3__namespace.polygonArea(cell) > threshold, // If true, show the label
 
     backgroundFill = "#fefefe01", // What to paint the bg rect of the labels. Needed for the onHover
     strokeWidth = 5,
@@ -76,8 +99,8 @@ export default function smartLabels(
   if (typeof font === "string") font = () => font;
   if (typeof hoverFont === "string") hoverFont = () => hoverFont;
 
-  let xExtent = d3.extent(data, x),
-    yExtent = d3.extent(data, y);
+  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];
 
@@ -111,21 +134,21 @@ export default function smartLabels(
   // Try to reuse the target
   if (renderer.toLocaleLowerCase() === "canvas") {
     if (target) {
-      target = d3.select(target.node ? target.node() : target);
+      target = d3__namespace.select(target.node ? target.node() : target);
     } else {
-      target = d3.create("canvas").attr("width", width).attr("height", height);
+      target = d3__namespace.create("canvas").attr("width", width).attr("height", height);
     }
     useOcclusion = false;
   } else {
     if (target) {
-      target = d3.select(target.node ? target.node() : target);
+      target = d3__namespace.select(target.node ? target.node() : target);
     } else {
-      target = d3.create("svg").attr("viewBox", [0, 0, width, height]);
+      target = d3__namespace.create("svg").attr("viewBox", [0, 0, width, height]);
     }
-    target = target || d3.create("svg").attr("viewBox", [0, 0, width, height]);
+    target = target || d3__namespace.create("svg").attr("viewBox", [0, 0, width, height]);
   }
 
-  const delaunay = d3.Delaunay.from(data, x, y);
+  const delaunay = d3__namespace.Delaunay.from(data, x, y);
   const voronoi = delaunay.voronoi([
     xExtent[0] - 1,
     yExtent[0] - 1,
@@ -213,7 +236,7 @@ export default function smartLabels(
         .attr("display", ({ show }) => (show ? null : "none"))
         .attr("d", ({ d, cell }, index) =>
           cell
-            ? `M${d3.polygonCentroid(cell)}L${x(d, index)},${y(d, index)}`
+            ? `M${d3__namespace.polygonCentroid(cell)}L${x(d, index)},${y(d, index)}`
             : null
         );
     }
@@ -259,7 +282,7 @@ export default function smartLabels(
       .style("font", ({d}, i) => font(d, i))
       .each(function ({ d, cell }, index) {
         if (!cell) return;
-        const [cx, cy] = d3.polygonCentroid(cell);
+        const [cx, cy] = d3__namespace.polygonCentroid(cell);
         const angle =
           (Math.round(
             (Math.atan2(cy - y(d, index), cx - x(d, index)) / Math.PI) * 2
@@ -267,7 +290,7 @@ export default function smartLabels(
             4) %
           4;
 
-        d3.select(this).call(
+        d3__namespace.select(this).call(
           angle === 0
             ? orient.right
             : angle === 3
@@ -279,7 +302,7 @@ export default function smartLabels(
       })
       .attr("transform", ({ d, cell }, index) => {
         if (labelsInCentroids) {
-          const [cx, cy] = d3.polygonCentroid(cell);
+          const [cx, cy] = d3__namespace.polygonCentroid(cell);
 
           return `translate(${cx}, ${cy})`;
         } else {
@@ -293,7 +316,7 @@ export default function smartLabels(
     if (hover) {
       mouseRect.on("mousemove", (event) => {
         // Find the selected point
-        const i = delaunay.find(...d3.pointer(event));
+        const i = delaunay.find(...d3__namespace.pointer(event));
         if (i === selected) return;
         selected = i;
 
@@ -361,7 +384,7 @@ export default function smartLabels(
     if (showAnchors || labelsInCentroids) {
       cells.forEach(({ d, cell, show }, index) => {
         if (!show) return;
-        const [cx, cy] = d3.polygonCentroid(cell);
+        const [cx, cy] = d3__namespace.polygonCentroid(cell);
         context.beginPath();
         context.moveTo(cx, cy);
         context.lineTo(x(d, index), y(d, index));
@@ -398,7 +421,7 @@ export default function smartLabels(
   function renderCanvasLabels(context, selected) {
     cells.forEach(({ d, cell, show }, index) => {
       if (!show && index !== selected) return;
-      const [cx, cy] = d3.polygonCentroid(cell);
+      const [cx, cy] = d3__namespace.polygonCentroid(cell);
       const angle =
         (Math.round(
           (Math.atan2(cy - y(d, index), cx - x(d, index)) / Math.PI) * 2
@@ -451,7 +474,7 @@ export default function smartLabels(
       if (debug) console.log("setting onmousemove", target);
 
       target.on("mousemove", (event) => {
-        const [mx, my] = d3.pointer(event);
+        const [mx, my] = d3__namespace.pointer(event);
         const i = delaunay.find(mx, my);
         if (i === selected) return;
         selected = i;
@@ -489,7 +512,7 @@ export default function smartLabels(
 // 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
+  const nodes = d3__namespace
     .sort(svg.selectAll(against), (node) => +node.getAttribute("data-priority"))
     .reverse()
     .map((node) => {
@@ -500,7 +523,7 @@ function occlusion(svg, against = "text") {
   const visible = [];
   for (const d of nodes) {
     const occluded = visible.some((e) => intersectRect(d, e));
-    d3.select(d.node).classed("occluded", occluded);
+    d3__namespace.select(d.node).classed("occluded", occluded);
     if (!occluded) visible.push(d);
   }
   return visible;
@@ -515,3 +538,5 @@ function intersectRect(a, b) {
     b.y + b.height < a.y
   );
 }
+
+module.exports = smartLabels;

package/dist/smartLabels.es.js

@@ -1,4 +1,4 @@
-// smart-labels v0.0.13 Copyright (c) 2024 John Alexis Guerra Gómez
+// smart-labels v0.0.14 Copyright (c) 2024 John Alexis Guerra Gómez
 import * as d3 from 'd3';
 
 // Based on https://observablehq.com/@d3/voronoi-labels by Mike Bostock

package/dist/smartLabels.js

@@ -1,4 +1,4 @@
-// smart-labels v0.0.13 Copyright (c) 2024 John Alexis Guerra Gómez
+// smart-labels v0.0.14 Copyright (c) 2024 John Alexis Guerra Gómez
 (function (global, factory) {
 typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('d3')) :
 typeof define === 'function' && define.amd ? define(['d3'], factory) :

package/dist/smartLabels.min.js

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

package/package.json

@@ -1,13 +1,25 @@
 {
   "name": "smart-labels",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "A basic library for adding labels to a visualization when there is enough space",
   "type": "module",
-  "main": "dist/smartLabels.min.js",
+  "main": "dist/smartLabels.cjs",
   "module": "dist/smartLabels.es.js",
   "browser": "dist/smartLabels.min.js",
   "unpkg": "dist/smartLabels.min.js",
   "jsdelivr": "dist/smartLabels.min.js",
+  "exports": {
+    ".": {
+      "import": "./dist/smartLabels.es.js",
+      "require": "./dist/smartLabels.cjs",
+      "default": "./dist/smartLabels.min.js"
+    }
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",
@@ -18,6 +30,7 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^1.0.0",
+    "d3": "^7.9.0",
     "eslint": "^9.14.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-html": "^8.1.2",
@@ -26,7 +39,7 @@
     "rollup": "^4.20.0",
     "rollup-plugin-commonjs": "^10.1.0"
   },
-  "dependencies": {
+  "peerDependencies": {
     "d3": "^7.9.0"
   },
   "author": {
@@ -34,6 +47,10 @@
     "url": "https://johnguerra.co"
   },
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/john-guerra/smart-labels.git"
+  },
   "bugs": {
     "url": "https://github.com/john-guerra/smart-labels/issues"
   },

package/rollup.config.js

@@ -1,66 +0,0 @@
-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" with { 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,
-        },
-      }),
-    ],
-  },
-];