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

Jump to bottom

Tool bar size adjustment when contextually zooming out #434

Merged
merged 2 commits into from
Aug 4, 2023
Merged

Tool bar size adjustment when contextually zooming out #434

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
117d152
toolBarIcons scale to compensate for zooming out
chimmyten Aug 4, 2023
08552bc
adjusted toolBar position for scope for title visibility
chimmyten Aug 4, 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
22 changes: 14 additions & 8 deletions ui/src/components/nodes/Code.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -372,6 +372,9 @@ function MyFloatingToolbar({ id, layout, setLayout }) {
[clonePod, id]
);

const zoomLevel = useReactFlowStore((s) => s.transform[2]);
const iconFontSize = zoomLevel < 1 ? `${1.5 * (1 / zoomLevel)}rem` : `1.5rem`;

const cutBegin = useStore(store, (state) => state.cutBegin);

const onCut = useCallback(
Expand All @@ -390,7 +393,7 @@ function MyFloatingToolbar({ id, layout, setLayout }) {
className="custom-drag-handle"
sx={{
cursor: "grab",
fontSize: "1.5rem",
fontSize: iconFontSize,
padding: "8px",
display: "inline-flex",
}}
Expand All @@ -404,7 +407,7 @@ function MyFloatingToolbar({ id, layout, setLayout }) {
wsRun(id);
}}
>
<PlayCircleOutlineIcon fontSize="inherit" />
<PlayCircleOutlineIcon style={{ fontSize: iconFontSize }} />
</IconButton>
</Tooltip>
)}
Expand All @@ -415,7 +418,7 @@ function MyFloatingToolbar({ id, layout, setLayout }) {
wsRunChain(id);
}}
>
<KeyboardDoubleArrowRightIcon fontSize="inherit" />
<KeyboardDoubleArrowRightIcon style={{ fontSize: iconFontSize }} />
</IconButton>
</Tooltip>
)}
Expand All @@ -425,7 +428,10 @@ function MyFloatingToolbar({ id, layout, setLayout }) {
>
<Tooltip title="Copy">
<IconButton className="copy-button">
<ContentCopyIcon fontSize="inherit" className="copy-button" />
<ContentCopyIcon
style={{ fontSize: iconFontSize }}
className="copy-button"
/>
</IconButton>
</Tooltip>
</CopyToClipboard>
Expand All @@ -436,13 +442,13 @@ function MyFloatingToolbar({ id, layout, setLayout }) {
>
<Tooltip title="Cut">
<IconButton>
<ContentCutIcon fontSize="inherit" />
<ContentCutIcon style={{ fontSize: iconFontSize }} />
</IconButton>
</Tooltip>
</CopyToClipboard>
)}
{!isGuest && (
<Tooltip title="Delete">
<Tooltip style={{ fontSize: iconFontSize }} title="Delete">
<ConfirmDeleteButton
handleConfirm={() => {
// Delete all edges connected to the node.
Expand All @@ -457,14 +463,14 @@ function MyFloatingToolbar({ id, layout, setLayout }) {
setLayout(layout === "bottom" ? "right" : "bottom");
}}
>
<ViewComfyIcon fontSize="inherit" />
<ViewComfyIcon style={{ fontSize: iconFontSize }} />
</IconButton>
</Tooltip>
<Box
className="custom-drag-handle"
sx={{
cursor: "grab",
fontSize: "1.5rem",
fontSize: iconFontSize,
padding: "8px",
display: "inline-flex",
}}
Expand Down
7 changes: 5 additions & 2 deletions ui/src/components/nodes/Rich.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -447,13 +447,16 @@ function MyFloatingToolbar({ id }: { id: string }) {
if (!store) throw new Error("Missing BearContext.Provider in the tree");
const reactFlowInstance = useReactFlow();
const isGuest = useStore(store, (state) => state.role === "GUEST");
const zoomLevel = useReactFlowStore((s) => s.transform[2]);
const iconFontSize = zoomLevel < 1 ? `${1.5 * (1 / zoomLevel)}rem` : `1.5rem`;

return (
<>
<Box
className="custom-drag-handle"
sx={{
cursor: "grab",
fontSize: "1.5rem",
fontSize: iconFontSize,
padding: "8px",
display: "inline-flex",
}}
Expand All @@ -474,7 +477,7 @@ function MyFloatingToolbar({ id }: { id: string }) {
className="custom-drag-handle"
sx={{
cursor: "grab",
fontSize: "1.5rem",
fontSize: iconFontSize,
padding: "8px",
display: "inline-flex",
}}
Expand Down
27 changes: 19 additions & 8 deletions ui/src/components/nodes/Scope.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,10 @@ function MyFloatingToolbar({ id }: { id: string }) {
[onCopy, cutBegin, id]
);
const autoLayout = useStore(store, (state) => state.autoLayout);

const zoomLevel = useReactFlowStore((s) => s.transform[2]);
const iconFontSize = zoomLevel < 1 ? `${1.5 * (1 / zoomLevel)}rem` : `1.5rem`;

return (
<Box
sx={{
Expand All @@ -101,7 +105,7 @@ function MyFloatingToolbar({ id }: { id: string }) {
className="custom-drag-handle"
sx={{
cursor: "grab",
fontSize: "1.5rem",
fontSize: iconFontSize,
padding: "8px",
display: "inline-flex",
}}
Expand All @@ -115,7 +119,7 @@ function MyFloatingToolbar({ id }: { id: string }) {
wsRunScope(id);
}}
>
<PlayCircleOutlineIcon fontSize="inherit" />
<PlayCircleOutlineIcon style={{ fontSize: iconFontSize }} />
</IconButton>
</Tooltip>
)}
Expand All @@ -127,7 +131,7 @@ function MyFloatingToolbar({ id }: { id: string }) {
autoLayout(id);
}}
>
<ViewTimelineOutlinedIcon fontSize="inherit" />
<ViewTimelineOutlinedIcon style={{ fontSize: iconFontSize }} />
</IconButton>
</Tooltip>
)}
Expand All @@ -138,7 +142,10 @@ function MyFloatingToolbar({ id }: { id: string }) {
>
<Tooltip title="Copy">
<IconButton className="copy-button">
<ContentCopyIcon fontSize="inherit" className="copy-button" />
<ContentCopyIcon
style={{ fontSize: iconFontSize }}
className="copy-button"
/>
</IconButton>
</Tooltip>
</CopyToClipboard>
Expand All @@ -150,13 +157,17 @@ function MyFloatingToolbar({ id }: { id: string }) {
>
<Tooltip title="Cut">
<IconButton>
<ContentCutIcon fontSize="inherit" />
<ContentCutIcon style={{ fontSize: iconFontSize }} />
</IconButton>
</Tooltip>
</CopyToClipboard>
)}
{!isGuest && (
<Tooltip title="Delete" className="nodrag">
<Tooltip
style={{ fontSize: iconFontSize }}
title="Delete"
className="nodrag"
>
<ConfirmDeleteButton
handleConfirm={(e: any) => {
// This does not work, will throw "Parent node
Expand All @@ -174,7 +185,7 @@ function MyFloatingToolbar({ id }: { id: string }) {
className="custom-drag-handle"
sx={{
cursor: "grab",
fontSize: "1.5rem",
fontSize: iconFontSize,
padding: "8px",
display: "inline-flex",
}}
Expand Down Expand Up @@ -315,7 +326,7 @@ export const ScopeNode = memo<NodeProps>(function ScopeNode({
position: "absolute",
border: "solid 1px #d6dee6",
right: "25px",
top: "-45px",
top: "-60px",
background: "white",
zIndex: 250,
justifyContent: "center",
Expand Down