Skip to content

Commit

Permalink
Use cursor pointer for nodes
Browse files Browse the repository at this point in the history
  • Loading branch information
Denis Bardadym committed Dec 9, 2023
1 parent f18cdf8 commit e1b03a0
Show file tree
Hide file tree
Showing 7 changed files with 150 additions and 16 deletions.
1 change: 1 addition & 0 deletions src/network/network.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@ export const Network: FunctionalComponent<NetworkProps> = ({
{nodes.map((node) => {
return (
<circle
className="node"
key={node.uid}
r={node.radius}
fill={getColor(node)}
Expand Down
4 changes: 4 additions & 0 deletions src/style/_base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,3 +136,7 @@ main {
margin-left: 0.5rem;
}
}

.node {
cursor: pointer;
}
1 change: 1 addition & 0 deletions src/sunburst/node.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ export const Node: FunctionalComponent<NodeProps> = ({
}) => {
return (
<path
className="node"
d={path}
fill-rule="evenodd"
stroke="#fff"
Expand Down
40 changes: 36 additions & 4 deletions test/__snapshots__/e2e.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,10 @@ main {
.module-filter + .module-filter {
margin-left: 0.5rem;
}

.node {
cursor: pointer;
}
</style>
</head>
<body>
Expand Down Expand Up @@ -4732,6 +4736,10 @@ main {
.module-filter + .module-filter {
margin-left: 0.5rem;
}

.node {
cursor: pointer;
}
</style>
</head>
<body>
Expand Down Expand Up @@ -9657,7 +9665,7 @@ var drawChart = (function (exports) {
return (u$1("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: \`\${-width / 2} \${-height / 2} \${width} \${height}\`, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onClick: onCanvasClick, children: u$1("g", { transform: transform.toString(), children: [u$1("g", { stroke: "#fff", "stroke-opacity": "0.9", children: links.map((link) => {
return (u$1("line", { "stroke-width": "1", x1: link.source.x, y1: link.source.y, x2: link.target.x, y2: link.target.y }, \`\${link.source.uid} - \${link.target.uid}\`));
}) }), u$1("g", { stroke: "#fff", "stroke-width": "1.5", children: nodes.map((node) => {
return (u$1("circle", { r: node.radius, fill: getColor(node), cx: node.x, cy: node.y, onMouseOver: (evt) => {
return (u$1("circle", { className: "node", r: node.radius, fill: getColor(node), cx: node.x, cy: node.y, onMouseOver: (evt) => {
noEvent(evt);
onNodeHover(node);
}, onClick: (evt) => {
Expand Down Expand Up @@ -10174,6 +10182,10 @@ main {
margin-left: 0.5rem;
}

.node {
cursor: pointer;
}

.details {
position: absolute;
display: flex;
Expand Down Expand Up @@ -14746,7 +14758,7 @@ var drawChart = (function (exports) {
};

const Node = ({ node, onMouseOver, onClick, path, highlighted, selected, }) => {
return (u$1("path", { d: path, "fill-rule": "evenodd", stroke: "#fff", fill: colorDefault(node), onMouseOver: (evt) => {
return (u$1("path", { className: "node", d: path, "fill-rule": "evenodd", stroke: "#fff", fill: colorDefault(node), onMouseOver: (evt) => {
evt.stopPropagation();
onMouseOver(node);
}, onClick: (evt) => {
Expand Down Expand Up @@ -15066,6 +15078,10 @@ main {
.module-filter + .module-filter {
margin-left: 0.5rem;
}

.node {
cursor: pointer;
}
</style>
</head>
<body>
Expand Down Expand Up @@ -19908,6 +19924,10 @@ main {
.module-filter + .module-filter {
margin-left: 0.5rem;
}

.node {
cursor: pointer;
}
</style>
</head>
<body>
Expand Down Expand Up @@ -24507,6 +24527,10 @@ main {
.module-filter + .module-filter {
margin-left: 0.5rem;
}

.node {
cursor: pointer;
}
</style>
</head>
<body>
Expand Down Expand Up @@ -29432,7 +29456,7 @@ var drawChart = (function (exports) {
return (u$1("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: \`\${-width / 2} \${-height / 2} \${width} \${height}\`, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onClick: onCanvasClick, children: u$1("g", { transform: transform.toString(), children: [u$1("g", { stroke: "#fff", "stroke-opacity": "0.9", children: links.map((link) => {
return (u$1("line", { "stroke-width": "1", x1: link.source.x, y1: link.source.y, x2: link.target.x, y2: link.target.y }, \`\${link.source.uid} - \${link.target.uid}\`));
}) }), u$1("g", { stroke: "#fff", "stroke-width": "1.5", children: nodes.map((node) => {
return (u$1("circle", { r: node.radius, fill: getColor(node), cx: node.x, cy: node.y, onMouseOver: (evt) => {
return (u$1("circle", { className: "node", r: node.radius, fill: getColor(node), cx: node.x, cy: node.y, onMouseOver: (evt) => {
noEvent(evt);
onNodeHover(node);
}, onClick: (evt) => {
Expand Down Expand Up @@ -29949,6 +29973,10 @@ main {
margin-left: 0.5rem;
}

.node {
cursor: pointer;
}

.details {
position: absolute;
display: flex;
Expand Down Expand Up @@ -34521,7 +34549,7 @@ var drawChart = (function (exports) {
};

const Node = ({ node, onMouseOver, onClick, path, highlighted, selected, }) => {
return (u$1("path", { d: path, "fill-rule": "evenodd", stroke: "#fff", fill: colorDefault(node), onMouseOver: (evt) => {
return (u$1("path", { className: "node", d: path, "fill-rule": "evenodd", stroke: "#fff", fill: colorDefault(node), onMouseOver: (evt) => {
evt.stopPropagation();
onMouseOver(node);
}, onClick: (evt) => {
Expand Down Expand Up @@ -34841,6 +34869,10 @@ main {
.module-filter + .module-filter {
margin-left: 0.5rem;
}

.node {
cursor: pointer;
}
</style>
</head>
<body>
Expand Down
40 changes: 36 additions & 4 deletions test/__snapshots__/gh59.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,10 @@ main {
.module-filter + .module-filter {
margin-left: 0.5rem;
}

.node {
cursor: pointer;
}
</style>
</head>
<body>
Expand Down Expand Up @@ -4735,6 +4739,10 @@ main {
.module-filter + .module-filter {
margin-left: 0.5rem;
}

.node {
cursor: pointer;
}
</style>
</head>
<body>
Expand Down Expand Up @@ -9660,7 +9668,7 @@ var drawChart = (function (exports) {
return (u$1("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: \`\${-width / 2} \${-height / 2} \${width} \${height}\`, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onClick: onCanvasClick, children: u$1("g", { transform: transform.toString(), children: [u$1("g", { stroke: "#fff", "stroke-opacity": "0.9", children: links.map((link) => {
return (u$1("line", { "stroke-width": "1", x1: link.source.x, y1: link.source.y, x2: link.target.x, y2: link.target.y }, \`\${link.source.uid} - \${link.target.uid}\`));
}) }), u$1("g", { stroke: "#fff", "stroke-width": "1.5", children: nodes.map((node) => {
return (u$1("circle", { r: node.radius, fill: getColor(node), cx: node.x, cy: node.y, onMouseOver: (evt) => {
return (u$1("circle", { className: "node", r: node.radius, fill: getColor(node), cx: node.x, cy: node.y, onMouseOver: (evt) => {
noEvent(evt);
onNodeHover(node);
}, onClick: (evt) => {
Expand Down Expand Up @@ -10184,6 +10192,10 @@ main {
margin-left: 0.5rem;
}

.node {
cursor: pointer;
}

.details {
position: absolute;
display: flex;
Expand Down Expand Up @@ -14756,7 +14768,7 @@ var drawChart = (function (exports) {
};

const Node = ({ node, onMouseOver, onClick, path, highlighted, selected, }) => {
return (u$1("path", { d: path, "fill-rule": "evenodd", stroke: "#fff", fill: colorDefault(node), onMouseOver: (evt) => {
return (u$1("path", { className: "node", d: path, "fill-rule": "evenodd", stroke: "#fff", fill: colorDefault(node), onMouseOver: (evt) => {
evt.stopPropagation();
onMouseOver(node);
}, onClick: (evt) => {
Expand Down Expand Up @@ -15076,6 +15088,10 @@ main {
.module-filter + .module-filter {
margin-left: 0.5rem;
}

.node {
cursor: pointer;
}
</style>
</head>
<body>
Expand Down Expand Up @@ -19918,6 +19934,10 @@ main {
.module-filter + .module-filter {
margin-left: 0.5rem;
}

.node {
cursor: pointer;
}
</style>
</head>
<body>
Expand Down Expand Up @@ -24522,6 +24542,10 @@ main {
.module-filter + .module-filter {
margin-left: 0.5rem;
}

.node {
cursor: pointer;
}
</style>
</head>
<body>
Expand Down Expand Up @@ -29447,7 +29471,7 @@ var drawChart = (function (exports) {
return (u$1("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: \`\${-width / 2} \${-height / 2} \${width} \${height}\`, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onClick: onCanvasClick, children: u$1("g", { transform: transform.toString(), children: [u$1("g", { stroke: "#fff", "stroke-opacity": "0.9", children: links.map((link) => {
return (u$1("line", { "stroke-width": "1", x1: link.source.x, y1: link.source.y, x2: link.target.x, y2: link.target.y }, \`\${link.source.uid} - \${link.target.uid}\`));
}) }), u$1("g", { stroke: "#fff", "stroke-width": "1.5", children: nodes.map((node) => {
return (u$1("circle", { r: node.radius, fill: getColor(node), cx: node.x, cy: node.y, onMouseOver: (evt) => {
return (u$1("circle", { className: "node", r: node.radius, fill: getColor(node), cx: node.x, cy: node.y, onMouseOver: (evt) => {
noEvent(evt);
onNodeHover(node);
}, onClick: (evt) => {
Expand Down Expand Up @@ -29975,6 +29999,10 @@ main {
margin-left: 0.5rem;
}

.node {
cursor: pointer;
}

.details {
position: absolute;
display: flex;
Expand Down Expand Up @@ -34547,7 +34575,7 @@ var drawChart = (function (exports) {
};

const Node = ({ node, onMouseOver, onClick, path, highlighted, selected, }) => {
return (u$1("path", { d: path, "fill-rule": "evenodd", stroke: "#fff", fill: colorDefault(node), onMouseOver: (evt) => {
return (u$1("path", { className: "node", d: path, "fill-rule": "evenodd", stroke: "#fff", fill: colorDefault(node), onMouseOver: (evt) => {
evt.stopPropagation();
onMouseOver(node);
}, onClick: (evt) => {
Expand Down Expand Up @@ -34867,6 +34895,10 @@ main {
.module-filter + .module-filter {
margin-left: 0.5rem;
}

.node {
cursor: pointer;
}
</style>
</head>
<body>
Expand Down
40 changes: 36 additions & 4 deletions test/__snapshots__/gh69.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,10 @@ main {
.module-filter + .module-filter {
margin-left: 0.5rem;
}

.node {
cursor: pointer;
}
</style>
</head>
<body>
Expand Down Expand Up @@ -4731,6 +4735,10 @@ main {
.module-filter + .module-filter {
margin-left: 0.5rem;
}

.node {
cursor: pointer;
}
</style>
</head>
<body>
Expand Down Expand Up @@ -9656,7 +9664,7 @@ var drawChart = (function (exports) {
return (u$1("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: \`\${-width / 2} \${-height / 2} \${width} \${height}\`, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onClick: onCanvasClick, children: u$1("g", { transform: transform.toString(), children: [u$1("g", { stroke: "#fff", "stroke-opacity": "0.9", children: links.map((link) => {
return (u$1("line", { "stroke-width": "1", x1: link.source.x, y1: link.source.y, x2: link.target.x, y2: link.target.y }, \`\${link.source.uid} - \${link.target.uid}\`));
}) }), u$1("g", { stroke: "#fff", "stroke-width": "1.5", children: nodes.map((node) => {
return (u$1("circle", { r: node.radius, fill: getColor(node), cx: node.x, cy: node.y, onMouseOver: (evt) => {
return (u$1("circle", { className: "node", r: node.radius, fill: getColor(node), cx: node.x, cy: node.y, onMouseOver: (evt) => {
noEvent(evt);
onNodeHover(node);
}, onClick: (evt) => {
Expand Down Expand Up @@ -10158,6 +10166,10 @@ main {
margin-left: 0.5rem;
}

.node {
cursor: pointer;
}

.details {
position: absolute;
display: flex;
Expand Down Expand Up @@ -14730,7 +14742,7 @@ var drawChart = (function (exports) {
};

const Node = ({ node, onMouseOver, onClick, path, highlighted, selected, }) => {
return (u$1("path", { d: path, "fill-rule": "evenodd", stroke: "#fff", fill: colorDefault(node), onMouseOver: (evt) => {
return (u$1("path", { className: "node", d: path, "fill-rule": "evenodd", stroke: "#fff", fill: colorDefault(node), onMouseOver: (evt) => {
evt.stopPropagation();
onMouseOver(node);
}, onClick: (evt) => {
Expand Down Expand Up @@ -15050,6 +15062,10 @@ main {
.module-filter + .module-filter {
margin-left: 0.5rem;
}

.node {
cursor: pointer;
}
</style>
</head>
<body>
Expand Down Expand Up @@ -19892,6 +19908,10 @@ main {
.module-filter + .module-filter {
margin-left: 0.5rem;
}

.node {
cursor: pointer;
}
</style>
</head>
<body>
Expand Down Expand Up @@ -24490,6 +24510,10 @@ main {
.module-filter + .module-filter {
margin-left: 0.5rem;
}

.node {
cursor: pointer;
}
</style>
</head>
<body>
Expand Down Expand Up @@ -29415,7 +29439,7 @@ var drawChart = (function (exports) {
return (u$1("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: \`\${-width / 2} \${-height / 2} \${width} \${height}\`, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onClick: onCanvasClick, children: u$1("g", { transform: transform.toString(), children: [u$1("g", { stroke: "#fff", "stroke-opacity": "0.9", children: links.map((link) => {
return (u$1("line", { "stroke-width": "1", x1: link.source.x, y1: link.source.y, x2: link.target.x, y2: link.target.y }, \`\${link.source.uid} - \${link.target.uid}\`));
}) }), u$1("g", { stroke: "#fff", "stroke-width": "1.5", children: nodes.map((node) => {
return (u$1("circle", { r: node.radius, fill: getColor(node), cx: node.x, cy: node.y, onMouseOver: (evt) => {
return (u$1("circle", { className: "node", r: node.radius, fill: getColor(node), cx: node.x, cy: node.y, onMouseOver: (evt) => {
noEvent(evt);
onNodeHover(node);
}, onClick: (evt) => {
Expand Down Expand Up @@ -29917,6 +29941,10 @@ main {
margin-left: 0.5rem;
}

.node {
cursor: pointer;
}

.details {
position: absolute;
display: flex;
Expand Down Expand Up @@ -34489,7 +34517,7 @@ var drawChart = (function (exports) {
};

const Node = ({ node, onMouseOver, onClick, path, highlighted, selected, }) => {
return (u$1("path", { d: path, "fill-rule": "evenodd", stroke: "#fff", fill: colorDefault(node), onMouseOver: (evt) => {
return (u$1("path", { className: "node", d: path, "fill-rule": "evenodd", stroke: "#fff", fill: colorDefault(node), onMouseOver: (evt) => {
evt.stopPropagation();
onMouseOver(node);
}, onClick: (evt) => {
Expand Down Expand Up @@ -34809,6 +34837,10 @@ main {
.module-filter + .module-filter {
margin-left: 0.5rem;
}

.node {
cursor: pointer;
}
</style>
</head>
<body>
Expand Down
Loading

0 comments on commit e1b03a0

Please sign in to comment.