Skip to content

Tree click interaction fixes #834

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
georgefst wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Tree click interaction fixes #834

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bd263d0
chore: Add type annotation to `edgeCommon`
georgefst Mar 20, 2023
351896a
fix: Make edges unfocusable
georgefst Mar 20, 2023
fb782dc
fix: Make cursor styles reflect reality
georgefst Mar 20, 2023
dcde712
refactor: Cleaner distinguishing of def-name node in `onNodeClick`
georgefst Mar 21, 2023
ec4a88b
(hack) select node when parent edge is clicked
georgefst Mar 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,7 +248,7 @@ const AppNoError = ({
<TreeReactFlow
{...(selection && { selection })}
onNodeClick={(_e, node) => {
if (!("nodeType" in node.data)) {
if (node.type == "primer-def-name") {
setSelection({
def: node.data.def,
});
Expand Down
7 changes: 4 additions & 3 deletions src/components/TreeReactFlow/Flavor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ export type NodeFlavor =
| NodeFlavorBoxBody
| NodeFlavorNoBody;

export const commonHoverClasses = "hover:ring hover:ring-4 hover:ring-offset-4";
export const commonHoverClasses =
"hover:ring hover:ring-4 hover:ring-offset-4 cursor-pointer";

export const flavorClasses = (flavor: NodeFlavor): string => {
switch (flavor) {
Expand Down Expand Up @@ -170,15 +171,15 @@ export const flavorClasses = (flavor: NodeFlavor): string => {
return "border-yellow-primary ring-yellow-primary";

case "PatternCon":
return "border-green-primary ring-green-primary bg-white-primary";
return "border-green-primary ring-green-primary bg-white-primary cursor-default";
case "PatternBind":
return classNames(
"border-blue-quaternary ring-blue-quaternary bg-white-primary",
"hover:ring-blue-quaternary",
commonHoverClasses
);
case "PatternApp":
return "border-blue-tertiary ring-blue-tertiary bg-blue-tertiary";
return "border-blue-tertiary ring-blue-tertiary bg-blue-tertiary cursor-default";
}
};

Expand Down
16 changes: 14 additions & 2 deletions src/components/TreeReactFlow/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,7 @@ const nodeTypes = {
className={classNames(
"flex justify-center rounded-md border-4",
flavorClasses(p.data.flavor),
"cursor-default",
// We use a white base so that the "transparent" background will not appear as such.
"bg-white-primary"
)}
Expand Down Expand Up @@ -288,10 +289,16 @@ const makePrimerNode = async (
nodeType,
...p,
};
const edgeCommon = (child: PrimerNode) => ({
const edgeCommon = (child: PrimerNode): PrimerEdge => ({
id: JSON.stringify([id, child.id]),
source: id,
target: child.id,
style: { cursor: "default" },
focusable: false,
...(child.type != "primer-def-name" &&
!flavorClasses(child.data.flavor).includes(commonHoverClasses) && {
interactionWidth: 0,
}),
zIndex,
});
switch (node.body.tag) {
Expand Down Expand Up @@ -501,7 +508,8 @@ export const TreeReactFlow = (p: TreeReactFlowProps) => {
target: tree.nodeId,
type: "step",
className: "stroke-grey-tertiary stroke-[0.25rem]",
style: { strokeDasharray: 4 },
style: { strokeDasharray: 4, cursor: "default" },
focusable: false,
zIndex: 0,
},
],
Expand Down Expand Up @@ -652,6 +660,10 @@ export const ReactFlowSafe = <N extends RFNode>(
<ReactFlow
{...{
...p,
onEdgeClick: (e, edge) => {
"onNodeClick" in p &&
p.onNodeClick(e, p.nodes.find((n) => n.id == edge.target) as N);
},
onNodeClick: (e, n) => {
"onNodeClick" in p &&
p.onNodeClick(
Expand Down