fix: tooltip position

src/draw.js

@@ -26,6 +26,8 @@ import { label } from "./layers/label.js";
 import { spikes } from "./layers/spikes.js";
 import { dotcartogram } from "./layers/dotcartogram.js";
 
+import { simple2 } from "./layers/simple2.js";
+
 // Main
 export function draw({ params = {}, layers = {} } = {}) {
   // default global paramaters
@@ -143,6 +145,44 @@ if (clip){ // test
       }, clipid);
     }
 
+
+    // Simple 2 (test)
+
+    // simple layers
+    if (layer.type == "layer" || layer.type == "simple2" || layer.type == undefined) {
+      simple2(svg, projection, {
+        geojson: layer.geojson,
+        fill: layer.fill,
+        stroke: layer.stroke,
+        strokeWidth: layer.strokeWidth,
+        strokeLinecap: layer.strokeLinecap,
+        strokeLinejoin: layer.strokeLinejoin,
+        fillOpacity: layer.fillOpacity,
+        strokeOpacity: layer.strokeOpacity,
+        strokeDasharray: layer.strokeDasharray,
+        symbol: layer.symbol,
+        symbol_size: layer.symbol_size,
+        symbol_iteration: layer.symbol_iteration,
+        symbol_shift: layer.symbol_shift,
+        tooltip: layer.tooltip,
+        leg_x: layer.leg_x,
+        leg_y: layer.leg_y,
+        leg_w: layer.leg_w,
+        leg_h: layer.leg_h,
+        leg_title: layer.leg_title,
+        leg_text: layer.leg_text,
+        leg_fontSize: layer.leg_fontSize,
+        leg_fontSize2: layer.leg_fontSize2,
+        leg_stroke: layer.leg_stroke,
+        leg_fillOpacity: layer.leg_fillOpacity,
+        leg_fill: layer.leg_fill,
+        leg_strokeWidth: layer.leg_strokeWidth,
+        leg_txtcol: layer.leg_txtcol
+      }, clipid, width, height);
+    }
+
+
+
     // simple layers
     if (layer.type == "layer" || layer.type == "simple" || layer.type == undefined) {
       simple(svg, projection, {
@@ -406,7 +446,8 @@ if (layer.type == "label") {
     scalebar(svg, projection, width, height, {
       x: s.x,
       y: s.y,
-      units: s.units
+      units: s.units,
+
     });
   }
 

src/helpers/tooltip2.js

@@ -0,0 +1,132 @@
+import * as d3selection from "d3-selection";
+const d3 = Object.assign({}, d3selection);
+
+
+export function tooltiptype(pointer, width, height){
+  const x_margin = 0.2 * width
+  const y_margin = 0.15 * height
+
+  if (pointer[0] < x_margin && pointer[1] <y_margin) { return "bottomleft";}
+  if (pointer[0] > width - x_margin && pointer[1] <y_margin) { return "bottomright";}
+  if (pointer[0] < x_margin && pointer[1] > height - y_margin) { return "topright";}
+  if (pointer[0] > width - x_margin && pointer[1] > height - y_margin) { return "topleft";}
+  if (pointer[1] > height - y_margin) { return "top";}
+  if (pointer[0] < x_margin) {  return "right";}
+  if (pointer[0] > width - x_margin) { return "left";}
+  return "bottom";
+}
+
+
+
+export function addtooltip(g, params) {
+  if (!params) return g.style("display", "none");
+
+  // Params by default
+
+  const fields =
+    Array.isArray(params.fields) == true ? params.fields : [params.fields];
+  const fill = params.fill ?? "#fcf7e6";
+  const stroke = params.stroke ?? "#4a4d4b";
+  const type = params.type ?? "bottom";
+
+  const l = fields.length;
+
+  let fontWeight = params.fontWeight;
+  if (fontWeight == undefined && l == 1) { fontWeight = ["bold"]; }
+  if (fontWeight == undefined && l > 1) { fontWeight = ["bold"].concat(Array(l - 1).fill("normal")); }
+  if (typeof fontWeight === "string") { fontWeight = Array(l).fill(fontWeight);}
+
+  let fontSize = params.fontSize;
+  if (fontSize == undefined && l == 1) { fontSize = [18]; }
+  if (fontSize == undefined && l > 1) { fontSize = [18].concat(Array(l - 1).fill(12));  }
+  if (typeof fontSize === "number") { fontSize = Array(l).fill(fontSize);}
+
+  let fontStyle = params.fontStyle;
+  if (fontStyle == undefined) { fontStyle = Array(l).fill("normal"); }
+  if (typeof fontStyle === "string") { fontStyle = Array(l).fill(fontStyle);}
+
+  // Display tooltip
+
+  g.style("display", null)
+    .style("pointer-events", "none")
+    .style("font", "8px sans-serif");
+
+  const path = g
+    .selectAll("path")
+    .data([null])
+    .join("path")
+    .attr("fill", fill)
+    .attr("stroke", stroke);
+
+  const text = g
+    .selectAll("text")
+    .data([null])
+    .join("text")
+    .call((text) =>
+      text
+        .selectAll("tspan")
+        .data(fields)
+        .join("tspan")
+        .attr("x", 0)
+        //.attr("y", (d, i) => `${i * +fontSize[i]}px`)
+        .attr(
+          "y",
+          (d, i) =>
+            `${fontSize.slice(0, i + 1).reduce((a, b) => a + b, 0) + 3 * i}px`
+        )
+
+        .style("font-weight", (_, i) => fontWeight[i])
+        .style("font-size", (_, i) => `${fontSize[i]}px`)
+        .style("font-style", (_, i) => fontStyle[i])
+        .style("fill", "#4d4545")
+        .text((d) => d)
+    );
+
+  const { x, y, width: w, height: h } = text.node().getBBox();
+  fields: "$NAMEen";
+  // Layout
+
+  switch (type) {
+    case "bottom":
+      text.attr("transform", `translate(${-w / 2},${15 - y})`);
+      path.attr(
+        "d",
+        `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`
+      );
+      break;
+    case "top":
+      text.attr("transform", `translate(${-w / 2},${-15 - y - h})`);
+      path.attr(
+        "d",
+        `M${-w / 2 - 10},-5H-5l5,5l5,-5H${w / 2 + 10}v${-h - 20}h-${w + 20}z`
+      );
+      break;
+    case "left":
+      text.attr("transform", `translate(${-w - 15},${-y - h / 2})`);
+      path.attr(
+        "d",
+        `M0,0l-5,5v${h / 2}h${-w - 20}v${-h - 10}h${w + 20}v${h / 2}z`
+      );
+      break;
+    case "right":
+      text.attr("transform", `translate(${15},${-y - h / 2})`);
+      path.attr( "d",`M0,0l5,5v${h / 2}h${w + 20}v${-h - 10}h${-w - 20}v${h / 2}z`);
+      break;
+    case "topleft":
+      text.attr("transform", `translate(${-w - 10},${-15 - y - h})`);
+      path.attr("d", `M0,0v${-h - 5 - 20}h${-w - 20}v${h + 20}h${w + 15}z`);
+      break;
+    case "topright":
+      text.attr("transform", `translate(${10},${-15 - y - h})`);
+      path.attr("d", `M0,0v${-h - 5 - 20}h${w + 20}v${h + 20}h${-w - 15}z`);
+      break;
+    case "bottomright":
+      text.attr("transform", `translate(${-w - 10},${15 - y})`);
+      path.attr("d", `M0,0v${+h + 5 + 20}h${-w - 20}v${-h - 20}h${+w + 15}z`);
+      break;
+    case "bottomleft":
+      text.attr("transform", `translate(${10},${15 - y})`);
+      path.attr("d", `M0,0v${+h + 5 + 20}h${w + 20}v${-h - 20}h${-w - 15}z`);
+      break;
+  }
+}

src/index.js

@@ -9,6 +9,7 @@ export {borders} from "./borders.js";
 // layer functions
 
 export {simple} from "./layers/simple.js"
+export {simple2} from "./layers/simple2.js"
 export {mushroom} from "./layers/mushroom.js"
 export {bubble} from "./layers/bubble.js"
 export {dotcartogram} from "./layers/dotcartogram.js"

src/layers/simple.js

@@ -78,7 +78,6 @@ export function simple(selection, projection, options = {}, clipid) {
        .attr("stroke-linecap", strokeLinecap)
        .attr("stroke-linejoin", strokeLinejoin)
        .attr("stroke-dasharray", strokeDasharray)
-       //.attr("clip-path", `url(#clip_${clipid}`)
        .on("touchmove mousemove", function (event, d) {
          if (tooltip != "") {
            if (Array.isArray(tooltip)) {