|
| 1 | +import * as selection from "d3-selection"; |
| 2 | +import * as drag from "d3-drag"; |
| 3 | +import classifyPoint from "robust-point-in-polygon"; |
| 4 | + |
| 5 | +export default function() { |
| 6 | + |
| 7 | + var items =[], |
| 8 | + closePathDistance = 75, |
| 9 | + closePathSelect = true, |
| 10 | + isPathClosed = false, |
| 11 | + hoverSelect = true, |
| 12 | + targetArea, |
| 13 | + on = {start:function(){}, draw: function(){}, end: function(){}}; |
| 14 | + |
| 15 | + // Function to execute on call |
| 16 | + function lasso(_this) { |
| 17 | + |
| 18 | + // add a new group for the lasso |
| 19 | + var g = _this.append("g") |
| 20 | + .attr("class","lasso"); |
| 21 | + |
| 22 | + // add the drawn path for the lasso |
| 23 | + var dyn_path = g.append("path") |
| 24 | + .attr("class","drawn"); |
| 25 | + |
| 26 | + // add a closed path |
| 27 | + var close_path = g.append("path") |
| 28 | + .attr("class","loop_close"); |
| 29 | + |
| 30 | + // add an origin node |
| 31 | + var origin_node = g.append("circle") |
| 32 | + .attr("class","origin"); |
| 33 | + |
| 34 | + // The transformed lasso path for rendering |
| 35 | + var tpath; |
| 36 | + |
| 37 | + // The lasso origin for calculations |
| 38 | + var origin; |
| 39 | + |
| 40 | + // The transformed lasso origin for rendering |
| 41 | + var torigin; |
| 42 | + |
| 43 | + // Store off coordinates drawn |
| 44 | + var drawnCoords; |
| 45 | + |
| 46 | + // Apply drag behaviors |
| 47 | + var drag = d3.drag() |
| 48 | + .on("start",dragstart) |
| 49 | + .on("drag",dragmove) |
| 50 | + .on("end",dragend); |
| 51 | + |
| 52 | + // Call drag |
| 53 | + targetArea.call(drag); |
| 54 | + |
| 55 | + function dragstart() { |
| 56 | + // Init coordinates |
| 57 | + drawnCoords = []; |
| 58 | + |
| 59 | + // Initialize paths |
| 60 | + tpath = ""; |
| 61 | + dyn_path.attr("d",null); |
| 62 | + close_path.attr("d",null); |
| 63 | + |
| 64 | + // Set every item to have a false selection and reset their center point and counters |
| 65 | + items.nodes().forEach(function(e) { |
| 66 | + e.__lasso.possible = false; |
| 67 | + e.__lasso.selected = false; |
| 68 | + e.__lasso.hoverSelect = false; |
| 69 | + e.__lasso.loopSelect = false; |
| 70 | + |
| 71 | + var box = e.getBoundingClientRect(); |
| 72 | + e.__lasso.lassoPoint = [Math.round(box.left + box.width/2),Math.round(box.top + box.height/2)]; |
| 73 | + }); |
| 74 | + |
| 75 | + // if hover is on, add hover function |
| 76 | + if(hoverSelect) { |
| 77 | + items.on("mouseover.lasso",function() { |
| 78 | + // if hovered, change lasso selection attribute to true |
| 79 | + this.__lasso.hoverSelect = true; |
| 80 | + }); |
| 81 | + } |
| 82 | + |
| 83 | + // Run user defined start function |
| 84 | + on.start(); |
| 85 | + } |
| 86 | + |
| 87 | + function dragmove() { |
| 88 | + // Get mouse position within body, used for calculations |
| 89 | + var x,y; |
| 90 | + if(d3.event.sourceEvent.type === "touchmove") { |
| 91 | + x = d3.event.sourceEvent.touches[0].clientX; |
| 92 | + y = d3.event.sourceEvent.touches[0].clientY; |
| 93 | + } |
| 94 | + else { |
| 95 | + x = d3.event.sourceEvent.clientX; |
| 96 | + y = d3.event.sourceEvent.clientY; |
| 97 | + } |
| 98 | + |
| 99 | + |
| 100 | + // Get mouse position within drawing area, used for rendering |
| 101 | + var tx = d3.mouse(this)[0]; |
| 102 | + var ty = d3.mouse(this)[1]; |
| 103 | + |
| 104 | + // Initialize the path or add the latest point to it |
| 105 | + if (tpath==="") { |
| 106 | + tpath = tpath + "M " + tx + " " + ty; |
| 107 | + origin = [x,y]; |
| 108 | + torigin = [tx,ty]; |
| 109 | + // Draw origin node |
| 110 | + origin_node |
| 111 | + .attr("cx",tx) |
| 112 | + .attr("cy",ty) |
| 113 | + .attr("r",7) |
| 114 | + .attr("display",null); |
| 115 | + } |
| 116 | + else { |
| 117 | + tpath = tpath + " L " + tx + " " + ty; |
| 118 | + } |
| 119 | + |
| 120 | + drawnCoords.push([x,y]); |
| 121 | + |
| 122 | + // Calculate the current distance from the lasso origin |
| 123 | + var distance = Math.sqrt(Math.pow(x-origin[0],2)+Math.pow(y-origin[1],2)); |
| 124 | + |
| 125 | + // Set the closed path line |
| 126 | + var close_draw_path = "M " + tx + " " + ty + " L " + torigin[0] + " " + torigin[1]; |
| 127 | + |
| 128 | + // Draw the lines |
| 129 | + dyn_path.attr("d",tpath); |
| 130 | + |
| 131 | + close_path.attr("d",close_draw_path); |
| 132 | + |
| 133 | + // Check if the path is closed |
| 134 | + isPathClosed = distance<=closePathDistance ? true : false; |
| 135 | + |
| 136 | + // If within the closed path distance parameter, show the closed path. otherwise, hide it |
| 137 | + if(isPathClosed && closePathSelect) { |
| 138 | + close_path.attr("display",null); |
| 139 | + } |
| 140 | + else { |
| 141 | + close_path.attr("display","none"); |
| 142 | + } |
| 143 | + |
| 144 | + items.nodes().forEach(function(n) { |
| 145 | + n.__lasso.loopSelect = (isPathClosed && closePathSelect) ? (classifyPoint(drawnCoords,n.__lasso.lassoPoint) < 1) : false; |
| 146 | + n.__lasso.possible = n.__lasso.hoverSelect || n.__lasso.loopSelect; |
| 147 | + }); |
| 148 | + |
| 149 | + on.draw(); |
| 150 | + } |
| 151 | + |
| 152 | + function dragend() { |
| 153 | + // Remove mouseover tagging function |
| 154 | + items.on("mouseover.lasso",null); |
| 155 | + |
| 156 | + items.nodes().forEach(function(n) { |
| 157 | + n.__lasso.selected = n.__lasso.possible; |
| 158 | + n.__lasso.possible = false; |
| 159 | + }); |
| 160 | + |
| 161 | + // Clear lasso |
| 162 | + dyn_path.attr("d",null); |
| 163 | + close_path.attr("d",null); |
| 164 | + origin_node.attr("display","none"); |
| 165 | + |
| 166 | + // Run user defined end function |
| 167 | + on.end(); |
| 168 | + } |
| 169 | + } |
| 170 | + |
| 171 | + // Set or get list of items for lasso to select |
| 172 | + lasso.items = function(_) { |
| 173 | + if (!arguments.length) return items; |
| 174 | + items = _; |
| 175 | + var nodes = items.nodes(); |
| 176 | + nodes.forEach(function(n) { |
| 177 | + n.__lasso = { |
| 178 | + "possible": false, |
| 179 | + "selected": false |
| 180 | + }; |
| 181 | + }); |
| 182 | + return lasso; |
| 183 | + }; |
| 184 | + |
| 185 | + // Return possible items |
| 186 | + lasso.possibleItems = function() { |
| 187 | + return items.filter(function() { |
| 188 | + return this.__lasso.possible; |
| 189 | + }); |
| 190 | + } |
| 191 | + |
| 192 | + // Return selected items |
| 193 | + lasso.selectedItems = function() { |
| 194 | + return items.filter(function() { |
| 195 | + return this.__lasso.selected; |
| 196 | + }); |
| 197 | + } |
| 198 | + |
| 199 | + // Return not possible items |
| 200 | + lasso.notPossibleItems = function() { |
| 201 | + return items.filter(function() { |
| 202 | + return !this.__lasso.possible; |
| 203 | + }); |
| 204 | + } |
| 205 | + |
| 206 | + // Return not selected items |
| 207 | + lasso.notSelectedItems = function() { |
| 208 | + return items.filter(function() { |
| 209 | + return !this.__lasso.selected; |
| 210 | + }); |
| 211 | + } |
| 212 | + |
| 213 | + // Distance required before path auto closes loop |
| 214 | + lasso.closePathDistance = function(_) { |
| 215 | + if (!arguments.length) return closePathDistance; |
| 216 | + closePathDistance = _; |
| 217 | + return lasso; |
| 218 | + }; |
| 219 | + |
| 220 | + // Option to loop select or not |
| 221 | + lasso.closePathSelect = function(_) { |
| 222 | + if (!arguments.length) return closePathSelect; |
| 223 | + closePathSelect = _===true ? true : false; |
| 224 | + return lasso; |
| 225 | + }; |
| 226 | + |
| 227 | + // Not sure what this is for |
| 228 | + lasso.isPathClosed = function(_) { |
| 229 | + if (!arguments.length) return isPathClosed; |
| 230 | + isPathClosed = _===true ? true : false; |
| 231 | + return lasso; |
| 232 | + }; |
| 233 | + |
| 234 | + // Option to select on hover or not |
| 235 | + lasso.hoverSelect = function(_) { |
| 236 | + if (!arguments.length) return hoverSelect; |
| 237 | + hoverSelect = _===true ? true : false; |
| 238 | + return lasso; |
| 239 | + }; |
| 240 | + |
| 241 | + // Events |
| 242 | + lasso.on = function(type,_) { |
| 243 | + if(!arguments.length) return on; |
| 244 | + if(arguments.length===1) return on[type]; |
| 245 | + var types = ["start","draw","end"]; |
| 246 | + if(types.indexOf(type)>-1) { |
| 247 | + on[type] = _; |
| 248 | + } |
| 249 | + return lasso; |
| 250 | + }; |
| 251 | + |
| 252 | + // Area where lasso can be triggered from |
| 253 | + lasso.targetArea = function(_) { |
| 254 | + if(!arguments.length) return targetArea; |
| 255 | + targetArea = _; |
| 256 | + return lasso; |
| 257 | + } |
| 258 | + |
| 259 | + |
| 260 | + |
| 261 | + return lasso; |
| 262 | +}; |
0 commit comments