diff --git a/src/frontend/src/CustomNodes/GenericNode/components/HandleTooltipComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/HandleTooltipComponent/index.tsx index 401444a4f..f6debfe83 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/HandleTooltipComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/HandleTooltipComponent/index.tsx @@ -1,28 +1,34 @@ import { convertTestName } from "@/components/storeCardComponent/utils/convert-test-name"; +import { Badge } from "@/components/ui/badge"; export default function HandleTooltipComponent({ isInput, tooltipTitle, - colors, isConnecting, isCompatible, isSameNode, + accentColorName, + accentForegroundColorName, + left, }: { isInput: boolean; - colors: string[]; tooltipTitle: string; isConnecting: boolean; isCompatible: boolean; isSameNode: boolean; + accentColorName: string; + accentForegroundColorName: string; + left: boolean; }) { const tooltips = tooltipTitle.split("\n"); const plural = tooltips.length > 1 ? "s" : ""; + return (
{isSameNode ? ( "Can't connect to the same node" ) : ( -
+
{isConnecting ? ( isCompatible ? ( @@ -40,22 +46,26 @@ export default function HandleTooltipComponent({ )} {tooltips.map((word, index) => ( -
{word} -
+ ))} {isConnecting && {isInput ? `input` : `output`}}
)} {!isConnecting && ( -
+
Drag to connect compatible {!isInput ? "inputs" : "outputs"}
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx index 8ef88ef14..5cf4d1820 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx @@ -99,8 +99,8 @@ export default function NodeStatus({ const getBaseBorderClass = (selected) => { let className = selected && !isBuilding - ? " border-[1px] ring-[0.75px] ring-foreground border-foreground hover:shadow-node" - : "border-[1px] ring-[0.5px] hover:shadow-node ring-border"; + ? " border ring-[0.75px] ring-muted-foreground border-muted-foreground hover:shadow-node" + : "border ring-[0.5px] hover:shadow-node ring-border"; let frozenClass = selected ? "border-ring-frozen" : "border-frozen"; return frozen ? frozenClass : className; }; @@ -218,7 +218,7 @@ export default function NodeStatus({
{validationString && ( -
+
{validationString}
)} diff --git a/src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx index 1492d0ee0..488885245 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx @@ -43,8 +43,8 @@ export default function HandleRenderComponent({ }) { const handleColorName = colorName?.[0] ?? ""; - const innerColorName = `inner-${handleColorName}`; - const innerForegroundColorName = `${innerColorName}-foreground`; + const accentColorName = `accent-${handleColorName}`; + const accentForegroundColorName = `${accentColorName}-foreground`; const setHandleDragging = useFlowStore((state) => state.setHandleDragging); const setFilterType = useFlowStore((state) => state.setFilterType); @@ -174,14 +174,14 @@ export default function HandleRenderComponent({ () => isNullHandle ? dark - ? "conic-gradient(hsl(var(--inner-gray)) 0deg 360deg)" - : "conic-gradient(hsl(var(--inner-gray-foreground)) 0deg 360deg)" + ? "conic-gradient(hsl(var(--accent-gray)) 0deg 360deg)" + : "conic-gradient(hsl(var(--accent-gray-foreground)) 0deg 360deg)" : "conic-gradient(" + colorName! .concat(colorName![0]) .map( (color, index) => - `hsl(var(--inner-${color}))` + + `hsl(var(--accent-${color}))` + " " + ((360 / colors.length) * index - 360 / (colors.length * 4)) + "deg " + @@ -203,34 +203,34 @@ export default function HandleRenderComponent({ styleSheet.textContent = ` @keyframes pulseNeon { 0% { - box-shadow: 0 0 0 2px hsl(var(--border)), - 0 0 2px hsl(var(--inner-${colorName![0]})), - 0 0 4px hsl(var(--inner-${colorName![0]})), - 0 0 6px hsl(var(--inner-${colorName![0]})), - 0 0 8px hsl(var(--inner-${colorName![0]})), - 0 0 10px hsl(var(--inner-${colorName![0]})), - 0 0 15px hsl(var(--inner-${colorName![0]})), - 0 0 20px hsl(var(--inner-${colorName![0]})); + box-shadow: 0 0 0 2px hsl(var(--node-ring)), + 0 0 2px hsl(var(--accent-${colorName![0]})), + 0 0 4px hsl(var(--accent-${colorName![0]})), + 0 0 6px hsl(var(--accent-${colorName![0]})), + 0 0 8px hsl(var(--accent-${colorName![0]})), + 0 0 10px hsl(var(--accent-${colorName![0]})), + 0 0 15px hsl(var(--accent-${colorName![0]})), + 0 0 20px hsl(var(--accent-${colorName![0]})); } 50% { - box-shadow: 0 0 0 2px hsl(var(--border)), - 0 0 4px hsl(var(--inner-${colorName![0]})), - 0 0 8px hsl(var(--inner-${colorName![0]})), - 0 0 12px hsl(var(--inner-${colorName![0]})), - 0 0 16px hsl(var(--inner-${colorName![0]})), - 0 0 20px hsl(var(--inner-${colorName![0]})), - 0 0 25px hsl(var(--inner-${colorName![0]})), - 0 0 30px hsl(var(--inner-${colorName![0]})); + box-shadow: 0 0 0 2px hsl(var(--node-ring)), + 0 0 4px hsl(var(--accent-${colorName![0]})), + 0 0 8px hsl(var(--accent-${colorName![0]})), + 0 0 12px hsl(var(--accent-${colorName![0]})), + 0 0 16px hsl(var(--accent-${colorName![0]})), + 0 0 20px hsl(var(--accent-${colorName![0]})), + 0 0 25px hsl(var(--accent-${colorName![0]})), + 0 0 30px hsl(var(--accent-${colorName![0]})); } 100% { - box-shadow: 0 0 0 2px hsl(var(--border)), - 0 0 2px hsl(var(--inner-${colorName![0]})), - 0 0 4px hsl(var(--inner-${colorName![0]})), - 0 0 6px hsl(var(--inner-${colorName![0]})), - 0 0 8px hsl(var(--inner-${colorName![0]})), - 0 0 10px hsl(var(--inner-${colorName![0]})), - 0 0 15px hsl(var(--inner-${colorName![0]})), - 0 0 20px hsl(var(--inner-${colorName![0]})); + box-shadow: 0 0 0 2px hsl(var(--node-ring)), + 0 0 2px hsl(var(--accent-${colorName![0]})), + 0 0 4px hsl(var(--accent-${colorName![0]})), + 0 0 6px hsl(var(--accent-${colorName![0]})), + 0 0 8px hsl(var(--accent-${colorName![0]})), + 0 0 10px hsl(var(--accent-${colorName![0]})), + 0 0 15px hsl(var(--accent-${colorName![0]})), + 0 0 20px hsl(var(--accent-${colorName![0]})); } } `; @@ -302,11 +302,13 @@ export default function HandleRenderComponent({ content={ } side={left ? "left" : "right"} @@ -366,12 +368,12 @@ export default function HandleRenderComponent({ height: "10px", transition: "all 0.2s", boxShadow: getNeonShadow( - innerForegroundColorName, + accentForegroundColorName, isHovered || openHandle, ), animation: (isHovered || openHandle) && !isNullHandle - ? "pulseNeon 0.7s ease-in-out infinite" + ? "pulseNeon 1.1s ease-in-out infinite" : "none", border: isNullHandle ? "2px solid hsl(var(--muted))" : "none", }} diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index fbe432d28..8881e5055 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -1,6 +1,3 @@ -import { Badge } from "@/components/ui/badge"; -import { BorderBeam } from "@/components/ui/border-beams"; -import { BuildStatus } from "@/constants/enums"; import { usePostValidateComponentCode } from "@/controllers/API/queries/nodes/use-post-validate-component-code"; import { useEffect, useMemo, useState } from "react"; import { useHotkeys } from "react-hotkeys-hook"; @@ -291,16 +288,6 @@ export default function GenericNode({ !hasOutputs && "pb-4", )} > - {BuildStatus.BUILDING === buildStatus && ( - - )} -
{ let isInvalid = validationStatus && !validationStatus.valid; - if ((isInvalid || buildStatus === BuildStatus.ERROR) && !isBuilding) { + if (BuildStatus.BUILDING === buildStatus) { + return "border-foreground border-[1px] ring-[0.75px] ring-foreground"; + } else if ((isInvalid || buildStatus === BuildStatus.ERROR) && !isBuilding) { return "border-destructive border-[1px] ring-[0.75px] ring-destructive"; } else { return ""; diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx index 879d29bc7..c0e8b1e73 100644 --- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx @@ -570,10 +570,8 @@ export default function Page({ view }: { view?: boolean }): JSX.Element { nodeColorsName[edge?.data?.targetHandle?.inputTypes[0]] || "hsl(var(--foreground))"; - console.log(edge?.data?.targetHandle); - - const innerColor = `hsl(var(--inner-${color}-muted-foreground))`; - document.documentElement.style.setProperty("--selected", innerColor); + const accentColor = `hsl(var(--accent-${color}-foreground))`; + document.documentElement.style.setProperty("--selected", accentColor); }; const { open } = useSidebar(); diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sidebarFilterComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sidebarFilterComponent/index.tsx index 4b0bb3c55..32313ce71 100644 --- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sidebarFilterComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sidebarFilterComponent/index.tsx @@ -17,7 +17,7 @@ export function SidebarFilterComponent({
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index 30054c868..970ede554 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -8,7 +8,7 @@ import CodeAreaModal from "@/modals/codeAreaModal"; import { APIClassType } from "@/types/api"; import _, { cloneDeep } from "lodash"; import { useEffect, useRef, useState } from "react"; -import { useUpdateNodeInternals } from "reactflow"; +import { useReactFlow, useStore, useUpdateNodeInternals } from "reactflow"; import IconComponent from "../../../../components/genericIconComponent"; import ShadTooltip from "../../../../components/shadTooltipComponent"; import { @@ -322,10 +322,31 @@ export default function NodeToolbarComponent({ (selectTriggerRef.current! as HTMLElement)?.click(); }; + // Use ReactFlow's store selector to get zoom updates + const zoom = useStore((state) => state.transform[2]); + const [scale, setScale] = useState(null); + + useEffect(() => { + if (!zoom) return; + if (zoom < 0.65) { + const newScale = Math.max(zoom * 1.2, 0.4); + setScale(newScale); + } else { + setScale(1); + } + }, [zoom]); + + if (scale === null) return <>; return ( <> -
-
+
+
{hasCode && ( } side="top" + styleClasses="relative bottom-2" > - + } side="top" + styleClasses="relative bottom-2" > - +