smart-labels 0.0.1 → 0.0.2

package/dist/smartLabels.es.js

@@ -454,4 +454,4 @@ function intersectRect(a, b) {
   );
 }
 
-export { occlusion, smartLabels };
+export { smartLabels as default };

package/dist/smartLabels.js

@@ -1,9 +1,9 @@
 // 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';
+typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('d3')) :
+typeof define === 'function' && define.amd ? define(['d3'], factory) :
+(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.smartLabels = factory(global.d3));
+})(this, (function (d3) { 'use strict';
 
 function _interopNamespaceDefault(e) {
 var n = Object.create(null);
@@ -477,7 +477,6 @@ function intersectRect(a, b) {
   );
 }
 
-exports.occlusion = occlusion;
-exports.smartLabels = smartLabels;
+return smartLabels;
 
 }));

package/dist/smartLabels.min.js

@@ -1,2 +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})}}));
+!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],label:l=(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:S="opacity: 0.2",showPoints:L=!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!==r(t)&&null!==r(t)));let $=o.extent(t,e),F=o.extent(t,r);c=c||$[1]-$[0],d=d||F[1]-F[0],T&&console.log("✅ smartLabels renderer",O),"canvas"===O.toLocaleLowerCase()?(h=o.select(h)||o.create("canvas").attr("width",c).attr("height",d),A=!1):h=h||o.create("svg").attr("viewBox",[0,0,c,d]);const B=o.Delaunay.from(t,e,r),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,o){if(!o){const n=B.find(e(t),r(t));if(-1===n)return console.log("couldn't find cell",n,t,e(t),r(t)),null;o=I[n][1]}return o}return I=I.map((([t,e])=>[t,D(t,e)])).map((([t,e])=>({d:t,cell:e,show:-o.polygonArea(e)>i}))),"canvas"===O.toLocaleLowerCase()?function(){const t=h.node().getContext("2d");(k||y)&&I.forEach((({d:n,cell:l,show:a})=>{if(!a)return;const[s,i]=o.polygonCentroid(l);t.beginPath(),t.moveTo(s,i),t.lineTo(e(n),r(n)),t.strokeStyle=w,t.stroke()})),x&&(t.beginPath(),E.render(t),t.strokeStyle=v,t.stroke()),L&&(t.beginPath(),B.renderPoints(t,2),t.fillStyle=P,t.fill(),t.strokeStyle=M,t.stroke()),I.forEach((({d:n,cell:i,show:c})=>{if(!c)return;const[d,h]=o.polygonCentroid(i),u=(Math.round(Math.atan2(h-r(n),d-e(n))/Math.PI*2)+4)%4;t.save(),t.translate(y?d:e(n),y?h:r(n)),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(l(n),0,0),t.fillText(l(n),0,0),t.restore()}));let n=null;u&&(T&&console.log("setting onmousemove",h),h.on("mousemove",(i=>{const[h,u]=o.pointer(i),m=B.find(h,u);m!==n&&(n=m,t.clearRect(0,0,c,d),I.forEach((({d:i,cell:c,show:d},h)=>{if(!d&&h!==n)return;const[u,p]=o.polygonCentroid(c),m=(Math.round(Math.atan2(p-r(i),u-e(i))/Math.PI*2)+4)%4;t.save(),t.translate(y?u:e(i),y?p:r(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===n?g:f,t.fillStyle=a,t.strokeStyle=s,t.lineWidth=b,t.strokeText(l(i),0,0),t.fillText(l(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) { ${S} }\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:n})=>n?`M${o.polygonCentroid(n)}L${e(t)},${r(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()),L&&(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:n}){if(!n)return;const[l,a]=o.polygonCentroid(n),s=(Math.round(Math.atan2(a-r(t),l-e(t))/Math.PI*2)+4)%4;o.select(this).call(0===s?O.right:3===s?O.top:1===s?O.bottom:O.left)})).attr("transform",(({d:t,cell:n})=>{if(y){const[t,e]=o.polygonCentroid(n);return`translate(${t}, ${e})`}return`translate(${e(t)}, ${r(t)})`})).attr("display",(({show:t})=>t?null:"none")).text((({d:t},e,o)=>l(t,e,o)));let F=null;if(u&&i.on("mousemove",(e=>{const n=B.find(...o.pointer(e));n!==F&&(F=n,$.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")),L&&T.attr("fill",((t,e)=>C)).classed("selected",((t,e)=>e===F)),p&&"function"==typeof p&&p(n))})),A){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:B,voronoi:E,cells:I})}}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "smart-labels",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "A basic library for adding labels to a visualization when there is enough space",
   "type": "module",
   "main": "dist/smartLabels.min.js",

package/src/index.js

@@ -15,7 +15,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 function smartLabels(
+export default function smartLabels(
   data,
   {
     x = (d) => d[0], // x coordinate accessor, expected to be in pixels
@@ -424,7 +424,7 @@ export function smartLabels(
 // 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 function occlusion(svg, against = "text") {
+function occlusion(svg, against = "text") {
   const nodes = d3
     .sort(svg.selectAll(against), (node) => +node.getAttribute("data-priority"))
     .reverse()