fork/cellxgene
1
0
Fork 0
mirror of https://github.com/chanzuckerberg/cellxgene.git synced 2026-09-26 08:08:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

Improve Lasso 'will close' visual feedback. (#1550)

Browse Source 
* Decreased the scope of polygonToPath and distance variables.  Added a
new variable for the lasso path color.  Removed the color setting from
handleDragStart, since this is already set in handleDrag.  Added a
closePathColor "#bb2f00" which is the complementary of lasso path color.
When a lasso can close, the color will change from blue to red.

* Fix some linter issues.

* Fixed some linter issues.

* Fixing some linter issues.

* Changed lasso open and closed to BLUE5 and GREEN5 respectively.
This commit is contained in:
Donald Paul Herman
2020-06-16 11:48:29 -04:00
committed by GitHub
parent 23619010c3
commit d6a96e9c29
1 changed files with 23 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/graph/setupLasso.js
+23 -17
View File
@@ -1,24 +1,26 @@
// https://bl.ocks.org/pbeshai/8008075f9ce771ee8be39e8c38907570
import * as d3 from "d3";
import { Colors } from "@blueprintjs/core";
const Lasso = () => {
const dispatch = d3.dispatch("start", "end", "cancel");
const polygonToPath = (polygon) =>
`M${polygon.map((d) => d.join(",")).join("L")}`;
const distance = (pt1, pt2) =>
Math.sqrt((pt2[0] - pt1[0]) ** 2 + (pt2[1] - pt1[1]) ** 2);
// distance last point has to be to first point before it auto closes when mouse is released
const closeDistance = 75;
const lasso = (svg) => {
let lassoPolygon;
let lassoPath;
let closePath;
const polygonToPath = (polygon) =>
`M${polygon.map((d) => d.join(",")).join("L")}`;
const distance = (pt1, pt2) =>
Math.sqrt((pt2[0] - pt1[0]) ** 2 + (pt2[1] - pt1[1]) ** 2);
// distance last point has to be to first point before it auto closes when mouse is released
const closeDistance = 75;
const lassoPathColor = Colors.BLUE5;
const handleDragStart = () => {
lassoPolygon = [d3.mouse(svg.node())]; // current x y of mouse within element
@@ -29,18 +31,14 @@ const Lasso = () => {
lassoPath = g
.append("path")
.attr("data-testid", "lasso-element")
.attr("fill", "#0bb")
.attr("fill-opacity", 0.1)
.attr("stroke", "#0bb")
.attr("stroke-dasharray", "3, 3");
closePath = g
.append("line")
.attr("x2", lassoPolygon[0][0])
.attr("y2", lassoPolygon[0][1])
.attr("stroke", "#0bb")
.attr("stroke-dasharray", "3, 3")
.attr("opacity", 0);
.attr("stroke-dasharray", "3, 3");
dispatch.call("start", lasso, lassoPolygon);
};
@@ -55,9 +53,17 @@ const Lasso = () => {
distance(lassoPolygon[0], lassoPolygon[lassoPolygon.length - 1]) <
closeDistance
) {
closePath.attr("x1", point[0]).attr("y1", point[1]).attr("opacity", 1);
const closePathColor = Colors.GREEN5;
closePath
.attr("x1", point[0])
.attr("y1", point[1])
.attr("opacity", 1)
.attr("stroke", closePathColor)
.attr("fill", closePathColor);
lassoPath.attr("stroke", closePathColor).attr("fill", closePathColor);
} else {
closePath.attr("opacity", 0);
lassoPath.attr("stroke", lassoPathColor).attr("fill", lassoPathColor);
}
};
@@ -121,9 +127,9 @@ const Lasso = () => {
lassoPath = g
.append("path")
.attr("data-testid", "lasso-element")
.attr("fill", "#0bb")
.attr("fill", lassoPathColor)
.attr("fill-opacity", 0.1)
.attr("stroke", "#0bb")
.attr("stroke", lassoPathColor)
.attr("stroke-dasharray", "3, 3");
lassoPath.attr("d", `${polygonToPath(lassoPolygon)}Z`);