-
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Render nodes differently when zoomed out (#8)
This changes it so that, when zoomed out, nodes will not render their bodies and will instead just render their title. Tags are also rendered until you zoom out far enough, then you just get the title. This also fixes long node titles causing the rename/change color/delete buttons to be cut off.
- Loading branch information
Nate Moore
authored
Jun 19, 2021
1 parent
deb1a5a
commit 03219c5
Showing
22 changed files
with
480 additions
and
111 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 2 additions & 2 deletions
4
...ponents/NodeGraphView/NodeFooter.test.tsx → ...raphView/NodeWithBody/NodeFooter.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
...ponents/NodeGraphView/NodeHeader.test.tsx → ...raphView/NodeWithBody/NodeHeader.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
6 changes: 3 additions & 3 deletions
6
...nts/NodeGraphView/NodeTagChooser.test.tsx → ...View/NodeWithBody/NodeTagChooser.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
75 changes: 75 additions & 0 deletions
75
loom-editor/src/components/NodeGraphView/NodeWithBody/index.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| import React from "react"; | ||
| import { renderWithProvider } from "../../../utils/test-utils"; | ||
| import { screen, fireEvent } from "@testing-library/react"; | ||
|
|
||
| import { YarnNode } from "loom-common/YarnNode"; | ||
|
|
||
| import NodeWithBody from "./"; | ||
|
|
||
| describe("<NodeWithBody />", () => { | ||
| const mockNode: YarnNode = { | ||
| title: "Mock Node", | ||
| body: "Some body", | ||
| tags: "cool tags", | ||
| }; | ||
|
|
||
| const mockNodeColor = "blue"; | ||
| const mockNodeColorIsDark = true; | ||
|
|
||
| it("renders", () => { | ||
| renderWithProvider( | ||
| <NodeWithBody | ||
| yarnNode={mockNode} | ||
| nodeColor={mockNodeColor} | ||
| nodeColorIsDark={mockNodeColorIsDark} | ||
| /> | ||
| ); | ||
| }); | ||
|
|
||
| it("renders no tags if there are none", () => { | ||
| const nodeWithNoTags = { | ||
| ...mockNode, | ||
| tags: "", | ||
| }; | ||
| renderWithProvider( | ||
| <NodeWithBody | ||
| yarnNode={nodeWithNoTags} | ||
| nodeColor={mockNodeColor} | ||
| nodeColorIsDark={mockNodeColorIsDark} | ||
| /> | ||
| ); | ||
| expect(screen.queryByTestId("node-graph-view-tags")).toBeNull(); | ||
| }); | ||
|
|
||
| it("opens the color chooser", () => { | ||
| renderWithProvider( | ||
| <NodeWithBody | ||
| yarnNode={mockNode} | ||
| nodeColor={mockNodeColor} | ||
| nodeColorIsDark={mockNodeColorIsDark} | ||
| /> | ||
| ); | ||
|
|
||
| expect(screen.queryByTestId("node-title-color-chooser")).toBeNull(); | ||
|
|
||
| fireEvent.click(screen.getByTitle("Change node color")); | ||
|
|
||
| expect(screen.queryByTestId("node-title-color-chooser")).not.toBeNull(); | ||
| }); | ||
|
|
||
| it("opens the tag chooser", () => { | ||
| renderWithProvider( | ||
| <NodeWithBody | ||
| yarnNode={mockNode} | ||
| nodeColor={mockNodeColor} | ||
| nodeColorIsDark={mockNodeColorIsDark} | ||
| /> | ||
| ); | ||
|
|
||
| expect(screen.queryByTestId("node-tag-chooser")).toBeNull(); | ||
|
|
||
| fireEvent.click(screen.getByTitle("Manage node tags")); | ||
|
|
||
| expect(screen.queryByTestId("node-tag-chooser")).not.toBeNull(); | ||
| }); | ||
| }); |
84 changes: 84 additions & 0 deletions
84
loom-editor/src/components/NodeGraphView/NodeWithBody/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| import React, { Fragment, FunctionComponent, useState } from "react"; | ||
|
|
||
| import { YarnNode } from "loom-common/YarnNode"; | ||
|
|
||
| import NodeHeader from "./NodeHeader"; | ||
| import NodeFooter from "./NodeFooter"; | ||
| import NodeBody from "./NodeBody"; | ||
| import NodeColorChooser from "./NodeColorChooser"; | ||
| import NodeTagChooser from "./NodeTagChooser"; | ||
|
|
||
| /** | ||
| * Render tha body of the node. | ||
| * If the color or tag chooser are open, those are rendered instead. | ||
| * (because of rendering bugs on Ubuntu, we have to render them instead of the body...) | ||
| * | ||
| * @param colorChooserOpen Whether or not the color chooser is open | ||
| * @param closeColorChooser Function to call to open the color chooser | ||
| * @param tagChooserOpen Whether or not the tag chooser is open | ||
| * @param closeTagChooser Function to call to close the tag chooser | ||
| * @param node Node to render body for | ||
| */ | ||
| const renderBody = ( | ||
| colorChooserOpen: boolean, | ||
| closeColorChooser: () => void, | ||
| tagChooserOpen: boolean, | ||
| closeTagChooser: () => void, | ||
| node: YarnNode | ||
| ) => { | ||
| const { title, body } = node; | ||
|
|
||
| if (colorChooserOpen) { | ||
| return <NodeColorChooser onClose={closeColorChooser} nodeTitle={title} />; | ||
| } | ||
|
|
||
| if (tagChooserOpen) { | ||
| return <NodeTagChooser onClose={closeTagChooser} node={node} />; | ||
| } | ||
|
|
||
| return <NodeBody body={body} />; | ||
| }; | ||
|
|
||
| interface NodeWithBodyProps { | ||
| yarnNode: YarnNode; | ||
| nodeColor: string; | ||
| nodeColorIsDark: boolean; | ||
| } | ||
|
|
||
| const NodeWithBody: FunctionComponent<NodeWithBodyProps> = ({ | ||
| yarnNode, | ||
| nodeColor, | ||
| nodeColorIsDark, | ||
| }) => { | ||
| const [colorChooserOpen, setColorChooserOpen] = useState(false); | ||
| const [tagChooserOpen, setTagChooserOpen] = useState(false); | ||
|
|
||
| const { title } = yarnNode; | ||
|
|
||
| return ( | ||
| <Fragment> | ||
| <NodeHeader | ||
| title={title} | ||
| nodeColor={nodeColor} | ||
| nodeColorIsDark={nodeColorIsDark} | ||
| onOpenColorChooser={() => setColorChooserOpen(!colorChooserOpen)} | ||
| /> | ||
| {renderBody( | ||
| colorChooserOpen, | ||
| () => setColorChooserOpen(false), | ||
| tagChooserOpen, | ||
| () => setTagChooserOpen(false), | ||
| yarnNode | ||
| )} | ||
| <NodeFooter | ||
| node={yarnNode} | ||
| nodeColor={nodeColor} | ||
| nodeColorIsDark={nodeColorIsDark} | ||
| onOpenTagChooser={() => setTagChooserOpen(true)} | ||
| data-testid="node-graph-view-tags" | ||
| /> | ||
| </Fragment> | ||
| ); | ||
| }; | ||
|
|
||
| export default NodeWithBody; |
53 changes: 53 additions & 0 deletions
53
loom-editor/src/components/NodeGraphView/ZoomedOutNode.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import React from "react"; | ||
| import { render, screen } from "@testing-library/react"; | ||
|
|
||
| import { YarnNode } from "loom-common/YarnNode"; | ||
|
|
||
| import ZoomedOutNode from "./ZoomedOutNode"; | ||
|
|
||
| describe("<ZoomedOutNode />", () => { | ||
| const mockNode: YarnNode = { | ||
| title: "Mock Node", | ||
| body: "Some body", | ||
| tags: "cool tags", | ||
| }; | ||
|
|
||
| it("renders", () => { | ||
| render( | ||
| <ZoomedOutNode | ||
| yarnNode={mockNode} | ||
| nodeColor={"blue"} | ||
| nodeColorIsDark={true} | ||
| currentZoom={0.5} | ||
| /> | ||
| ); | ||
| }); | ||
|
|
||
| it("shows tags when not super zoomed out", () => { | ||
| render( | ||
| <ZoomedOutNode | ||
| yarnNode={mockNode} | ||
| nodeColor={"blue"} | ||
| nodeColorIsDark={true} | ||
| currentZoom={0.5} | ||
| /> | ||
| ); | ||
|
|
||
| // 2 because we have "cool tags" in our mock node | ||
| expect(screen.queryAllByTestId("zoomed-out-node-tag")).toHaveLength(2); | ||
| }); | ||
|
|
||
| it("hides tags when really zoomed out", () => { | ||
| render( | ||
| <ZoomedOutNode | ||
| yarnNode={mockNode} | ||
| nodeColor={"blue"} | ||
| nodeColorIsDark={true} | ||
| currentZoom={0.005} | ||
| /> | ||
| ); | ||
|
|
||
| // these don't render if we're REALLY zoomed out | ||
| expect(screen.queryAllByTestId("zoomed-out-node-tag")).toHaveLength(0); | ||
| }); | ||
| }); |
Oops, something went wrong.