internals: lasso local replace d3-lasso

Author: davidgohel

DESCRIPTION

@@ -1,7 +1,7 @@
 Type: Package
 Package: ggiraph
 Title: Make 'ggplot2' Graphics Interactive
-Version: 0.9.4.001
+Version: 0.9.4.002
 Authors@R: c(
     person("David", "Gohel", , "david.gohel@ardata.fr", role = c("aut", "cre")),
     person("Panagiotis", "Skintzos", , "sigmapi@posteo.net", role = "aut"),

NEWS.md

@@ -1,7 +1,7 @@
 # ggiraph 0.9.4
 
 - toolbar gains new button "fullscreen".
-
+- internals: lasso local replace d3-lasso and ggiraph is using the latest version od d3.js.
 
 # ggiraph 0.9.3
 

inst/htmlwidgets/girafe.js

@@ -0,0 +1,264 @@
+import * as d3 from 'd3';
+import classifyPoint from 'robust-point-in-polygon';
+
+export function lasso() {
+  var items = [],
+    closePathDistance = 75,
+    closePathSelect = true,
+    isPathClosed = false,
+    hoverSelect = true,
+    targetArea,
+    on = {
+      start: function () {},
+      draw: function () {},
+      end: function () {}
+    };
+
+  // Function to execute on call
+  function lasso(_this) {
+    // add a new group for the lasso
+    var g = _this.append('g').attr('class', 'lasso');
+
+    // add the drawn path for the lasso
+    var dyn_path = g.append('path').attr('class', 'drawn');
+
+    // add a closed path
+    var close_path = g.append('path').attr('class', 'loop_close');
+
+    // add an origin node
+    var origin_node = g.append('circle').attr('class', 'origin');
+
+    // The transformed lasso path for rendering
+    var tpath;
+
+    // The lasso origin for calculations
+    var origin;
+
+    // The transformed lasso origin for rendering
+    var torigin;
+
+    // Store off coordinates drawn
+    var drawnCoords;
+
+    // Apply drag behaviors
+    var dragAction = d3
+      .drag()
+      .on('start', dragstart)
+      .on('drag', dragmove)
+      .on('end', dragend);
+
+    // Call drag
+    targetArea.call(dragAction);
+
+    function dragstart() {
+      // Init coordinates
+      drawnCoords = [];
+
+      // Initialize paths
+      tpath = '';
+      dyn_path.attr('d', null);
+      close_path.attr('d', null);
+
+      // Set every item to have a false selection and reset their center point and counters
+      items.nodes().forEach(function (e) {
+        e.__lasso.possible = false;
+        e.__lasso.selected = false;
+        e.__lasso.hoverSelect = false;
+        e.__lasso.loopSelect = false;
+
+        var box = e.getBoundingClientRect();
+        e.__lasso.lassoPoint = [
+          Math.round(box.left + box.width / 2),
+          Math.round(box.top + box.height / 2)
+        ];
+      });
+
+      // if hover is on, add hover function
+      if (hoverSelect) {
+        items.on('mouseover.lasso', function () {
+          // if hovered, change lasso selection attribute to true
+          this.__lasso.hoverSelect = true;
+        });
+      }
+
+      // Run user defined start function
+      on.start();
+    }
+
+    function dragmove(event) {
+      // Get mouse position within body, used for calculations
+      var x, y;
+      if (event.sourceEvent.type === 'touchmove') {
+        x = event.sourceEvent.touches[0].clientX;
+        y = event.sourceEvent.touches[0].clientY;
+      } else {
+        x = event.sourceEvent.clientX;
+        y = event.sourceEvent.clientY;
+      }
+
+      // Get mouse position within drawing area, used for rendering
+      var point = d3.pointer(event, this);
+      var tx = point[0];
+      var ty = point[1];
+
+      // Initialize the path or add the latest point to it
+      if (tpath === '') {
+        tpath = tpath + 'M ' + tx + ' ' + ty;
+        origin = [x, y];
+        torigin = [tx, ty];
+        // Draw origin node
+        origin_node
+          .attr('cx', tx)
+          .attr('cy', ty)
+          .attr('r', 7)
+          .attr('display', null);
+      } else {
+        tpath = tpath + ' L ' + tx + ' ' + ty;
+      }
+
+      drawnCoords.push([x, y]);
+
+      // Calculate the current distance from the lasso origin
+      var distance = Math.sqrt(
+        Math.pow(x - origin[0], 2) + Math.pow(y - origin[1], 2)
+      );
+
+      // Set the closed path line
+      var close_draw_path =
+        'M ' + tx + ' ' + ty + ' L ' + torigin[0] + ' ' + torigin[1];
+
+      // Draw the lines
+      dyn_path.attr('d', tpath);
+
+      close_path.attr('d', close_draw_path);
+
+      // Check if the path is closed
+      isPathClosed = distance <= closePathDistance ? true : false;
+
+      // If within the closed path distance parameter, show the closed path. otherwise, hide it
+      if (isPathClosed && closePathSelect) {
+        close_path.attr('display', null);
+      } else {
+        close_path.attr('display', 'none');
+      }
+
+      items.nodes().forEach(function (n) {
+        n.__lasso.loopSelect =
+          isPathClosed && closePathSelect
+            ? classifyPoint(drawnCoords, n.__lasso.lassoPoint) < 1
+            : false;
+        n.__lasso.possible = n.__lasso.hoverSelect || n.__lasso.loopSelect;
+      });
+
+      on.draw();
+    }
+
+    function dragend() {
+      // Remove mouseover tagging function
+      items.on('mouseover.lasso', null);
+
+      items.nodes().forEach(function (n) {
+        n.__lasso.selected = n.__lasso.possible;
+        n.__lasso.possible = false;
+      });
+
+      // Clear lasso
+      dyn_path.attr('d', null);
+      close_path.attr('d', null);
+      origin_node.attr('display', 'none');
+
+      // Run user defined end function
+      on.end();
+    }
+  }
+
+  // Set or get list of items for lasso to select
+  lasso.items = function (_) {
+    if (!arguments.length) return items;
+    items = _;
+    var nodes = items.nodes();
+    nodes.forEach(function (n) {
+      n.__lasso = {
+        possible: false,
+        selected: false
+      };
+    });
+    return lasso;
+  };
+
+  // Return possible items
+  lasso.possibleItems = function () {
+    return items.filter(function () {
+      return this.__lasso.possible;
+    });
+  };
+
+  // Return selected items
+  lasso.selectedItems = function () {
+    return items.filter(function () {
+      return this.__lasso.selected;
+    });
+  };
+
+  // Return not possible items
+  lasso.notPossibleItems = function () {
+    return items.filter(function () {
+      return !this.__lasso.possible;
+    });
+  };
+
+  // Return not selected items
+  lasso.notSelectedItems = function () {
+    return items.filter(function () {
+      return !this.__lasso.selected;
+    });
+  };
+
+  // Distance required before path auto closes loop
+  lasso.closePathDistance = function (_) {
+    if (!arguments.length) return closePathDistance;
+    closePathDistance = _;
+    return lasso;
+  };
+
+  // Option to loop select or not
+  lasso.closePathSelect = function (_) {
+    if (!arguments.length) return closePathSelect;
+    closePathSelect = _ === true ? true : false;
+    return lasso;
+  };
+
+  // Not sure what this is for
+  lasso.isPathClosed = function (_) {
+    if (!arguments.length) return isPathClosed;
+    isPathClosed = _ === true ? true : false;
+    return lasso;
+  };
+
+  // Option to select on hover or not
+  lasso.hoverSelect = function (_) {
+    if (!arguments.length) return hoverSelect;
+    hoverSelect = _ === true ? true : false;
+    return lasso;
+  };
+
+  // Events
+  lasso.on = function (type, _) {
+    if (!arguments.length) return on;
+    if (arguments.length === 1) return on[type];
+    var types = ['start', 'draw', 'end'];
+    if (types.indexOf(type) > -1) {
+      on[type] = _;
+    }
+    return lasso;
+  };
+
+  // Area where lasso can be triggered from
+  lasso.targetArea = function (_) {
+    if (!arguments.length) return targetArea;
+    targetArea = _;
+    return lasso;
+  };
+
+  return lasso;
+}

srcjs/modules/lasso.js

@@ -1,8 +1,5 @@
 import * as d3 from 'd3';
-import { lasso } from 'd3-lasso';
-
-// Make d3 available globally for d3-lasso
-window.d3 = d3;
+import { lasso } from './lasso';
 
 export default class SelectionHandler {
   constructor(svgid, options) {

srcjs/modules/selection.js

@@ -114,8 +114,8 @@ export default class ZoomHandler {
           .on('start', function () {
             targetEl.style('cursor', 'move');
           })
-          .on('zoom', function () {
-            targetEl.attr('transform', d3.event.transform);
+          .on('zoom', function (event) {
+            targetEl.attr('transform', event.transform);
           })
           .on('end', function () {
             targetEl.style('cursor', 'auto');
@@ -296,10 +296,11 @@ function dragrect() {
       on.start();
     }
 
-    function dragmove() {
+    function dragmove(event) {
       // mouse position within drawing area
-      const tx = d3.mouse(this)[0];
-      const ty = d3.mouse(this)[1];
+      const point = d3.pointer(event, this);
+      const tx = point[0];
+      const ty = point[1];
 
       // initialize the points or set the latest point
       if (!p1) {