Skip to content
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

[WIP] make nodes collapsable #6

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

[WIP] make nodes collapsable #6

Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a226fab
prototyping collapsable nodes
m0veax Jan 25, 2024
081059b
added button with state
m0veax Jan 25, 2024
095d79c
button works now
m0veax Jan 25, 2024
201c378
better screenshot for readme (#8)
m0veax Jan 27, 2024
a0caf15
add redux
m0veax Jan 30, 2024
9226cd8
initialize redux setup
m0veax Jan 30, 2024
237daad
get a template by CPDD
m0veax Jan 30, 2024
89bf7fd
prototype a working tree in the state[1;2Q
m0veax Jan 30, 2024
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
8 changes: 7 additions & 1 deletion app/DTNode.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { memo, useState } from "react";
import { Handle, NodeProps, Position } from "reactflow";


const style = {
// wordWrap: "break-word",
whiteSpace: "pre-wrap" as "pre-wrap", // This is weird, TypoScripto...
Expand All @@ -11,6 +12,7 @@ const style = {
width: 150,
fontSize: 11,
fontFamily: "Fira Code",
display: "block",
};

const DTNode = ({
Expand All @@ -20,12 +22,16 @@ const DTNode = ({
sourcePosition = Position.Bottom
}: NodeProps) => {
const [hovered, setHovered] = useState(false);
const [collapsed, setCollapsed] = useState(false);

const hoverOn = () => setHovered(true);
const hoverOff = () => setHovered(false);
const collapseOn = () => setCollapsed(collapsed ? false : true);

const borderColor = hovered ? "#987987" : "#789789";
const borderStyle = hovered ? "dotted" : "solid";
const collapseText = collapsed ? "[+]" : "[-]";

return (
<>
<Handle
Expand All @@ -38,7 +44,7 @@ const DTNode = ({
onMouseEnter={hoverOn}
onMouseLeave={hoverOff}
>
{data?.label}
{data?.label} <button onClick={() => collapseOn()} >{collapseText}</button>
</div>
<Handle
type="source"
Expand Down