fix: optional clip path to improve performance issue #19

riatelab · Mar 14, 2022 · 65bd9d9 · 65bd9d9
1 parent 7072e87
commit 65bd9d9
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 8 deletions.
diff --git a/src/draw.js b/src/draw.js
@@ -41,6 +41,7 @@ export function draw({ params = {}, layers = {} } = {}) {
   let extent = params.extent ? params.extent : null;
   let margin = params.margin ? params.margin : 1;
   let background = params.background;
+  let clip = params.clip ?? false // test
 
   // optimal heights
   let height = getheight(layers, extent, margin, projection, width);
@@ -94,13 +95,16 @@ export function draw({ params = {}, layers = {} } = {}) {
     );
 
   // Clip
-  const clipid = Date.now().toString(36) + Math.random().toString(36).substr(2);
+let clipid = null
+if (clip){ // test
+  clipid = Date.now().toString(36) + Math.random().toString(36).substr(2);
   svg
     .append("clipPath")
     .attr("id", `clip_${clipid}`)
     .append("path")
     .datum({ type: "Sphere" })
     .attr("d", d3.geoPath(projection));
+} // test
 
   // Background color
   if (background) {

diff --git a/src/layers/graticule.js b/src/layers/graticule.js
@@ -17,9 +17,7 @@ export function graticule(selection, projection, options = {}, clipid) {
   step = Array.isArray(step) ? step : [step, step];
   selection
     .append("g")
-    // .attr(":inkscape:groupmode", "layer")
-    // .attr("id", "graticule")
-    // .attr(":inkscape:label", "graticule")
+    .attr("clip-path", clipid == null ? `none` : `url(#clip_${clipid}`)
     .append("path")
     .datum(d3.geoGraticule().step(step))
     .attr("d", d3.geoPath(projection))
@@ -30,5 +28,5 @@ export function graticule(selection, projection, options = {}, clipid) {
     .style("stroke-linecap", strokeLinecap)
     .style("stroke-linejoin", strokeLinejoin)
     .style("stroke-dasharray", strokeDasharray)
-    .attr("clip-path", `url(#clip_${clipid}`)
+
 }
diff --git a/src/layers/missing.js b/src/layers/missing.js
@@ -29,6 +29,7 @@ export function missing(selection, projection, options = {}, clipid){
 
   selection
     .append("g")
+    .attr("clip-path", clipid == null ? `none` : `url(#clip_${clipid}`)
     .selectAll("path")
     .data(missing)
     .join("path")
@@ -37,7 +38,7 @@ export function missing(selection, projection, options = {}, clipid){
     .attr("stroke", stroke)
     .attr("stroke-width", strokeWidth)
     .attr("fill-opacity", fillOpacity)
-    .attr("clip-path", `url(#clip_${clipid}`);
+
 
   // Legend
 

diff --git a/src/layers/shadow.js b/src/layers/shadow.js
@@ -40,13 +40,13 @@ export function shadow(selection, projection, geojson, clipid, defs, options = {
 
   selection
     .append("g")
+    .attr("clip-path", clipid == null ? `none` : `url(#clip_${clipid}`)
     .append("path")
     .datum(merged)
     .attr("d", path)
     .attr("fill", fill)
     .attr("opacity", opacity)
     .attr("stroke", stroke)
-    .attr("clip-path", `url(#clip_${clipid}`)
     .attr("filter", "url(#blur)")
     .attr("transform", `translate(${dx} ${dy})`);
 }
diff --git a/src/layers/simple.js b/src/layers/simple.js
@@ -53,10 +53,13 @@ export function simple(selection, projection, options = {}, clipid) {
      strokeWidth = options.strokeWidth ? options.strokeWidth : 1;
    }
 
+
+//console.log(clipid)
    // If lines or polygons
    if (figuration(geojson) == "l" || figuration(geojson) == "z") {
      selection
        .append("g")
+       .attr("clip-path", clipid == null ? `none` : `url(#clip_${clipid}`)
        .selectAll("path")
        .data(geojson.features)
        .join("path")
@@ -75,7 +78,7 @@ 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}`)
+       //.attr("clip-path", `url(#clip_${clipid}`)
        .on("touchmove mousemove", function (event, d) {
          if (tooltip != "") {
            if (Array.isArray(tooltip)) {