From 14dd0bc3d78a3c2ec522d0b05daccbfd12ce65c4 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Wed, 6 Sep 2023 19:01:46 +0200 Subject: [PATCH] move configuration type directly into handle interface and add more options for configuration --- .../react-flow/handles/HandleDefault.tsx | 83 ++++++++++--------- .../react-flow/handles/_handles.scss | 26 +++++- .../react-flow/nodes/NodeContent.tsx | 26 ++---- 3 files changed, 79 insertions(+), 56 deletions(-) diff --git a/src/extensions/react-flow/handles/HandleDefault.tsx b/src/extensions/react-flow/handles/HandleDefault.tsx index 3bc9a0c2..f8eda77b 100644 --- a/src/extensions/react-flow/handles/HandleDefault.tsx +++ b/src/extensions/react-flow/handles/HandleDefault.tsx @@ -9,6 +9,10 @@ import { HandleContent, HandleContentProps } from "./HandleContent"; import { HandleTools } from "./HandleTools"; interface HandleExtensionProps extends ReacFlowVersionSupportProps { + /** + * Defines the handle category, mainly used to adjust layout. + */ + category?: "configuration" | "flexibel" | "fixed" | "unknown" | "dependency"; /** * Extended handle data. */ @@ -26,47 +30,52 @@ export interface HandleNextProps extends HandleExtensionProps, ReactFlowHandleNe export type HandleDefaultProps = HandleProps | HandleNextProps; -export const HandleDefault = memo(({ flowVersion, data, tooltip, children, ...handleProps }: HandleDefaultProps) => { - const evaluateFlowVersion = useReactFlowVersion(); - const flowVersionCheck = flowVersion || evaluateFlowVersion; - const [toolsDisplayed, setToolsDisplayed] = React.useState(false); +export const HandleDefault = memo( + ({ flowVersion, data, tooltip, children, category, ...handleProps }: HandleDefaultProps) => { + const evaluateFlowVersion = useReactFlowVersion(); + const flowVersionCheck = flowVersion || evaluateFlowVersion; + const [toolsDisplayed, setToolsDisplayed] = React.useState(false); - const handleClosing = () => { - setToolsDisplayed(false); - }; + const handleClosing = () => { + setToolsDisplayed(false); + }; - const tooltipTitle = tooltip ? { title: tooltip } : {}; - const configToolsOn = { - defaultIsOpen: true, - autoFocus: true, - interactionKind: BlueprintPopoverInteractionKind.HOVER, - onClosing: handleClosing, - }; + const tooltipTitle = tooltip ? { title: tooltip } : {}; + const configToolsOn = { + defaultIsOpen: true, + autoFocus: true, + interactionKind: BlueprintPopoverInteractionKind.HOVER, + onClosing: handleClosing, + }; - const isToolsContent = children && typeof children !== "string" && children.type === HandleTools; - let handleContent = {children}; + const isToolsContent = children && typeof children !== "string" && children.type === HandleTools; + let handleContent = {children}; - if (isToolsContent && toolsDisplayed) { - handleContent = {React.cloneElement(children ?? <>, configToolsOn)}; - } - if (isToolsContent && !toolsDisplayed) { - handleContent = ; - } - const handleClick = React.useCallback(() => setToolsDisplayed(!toolsDisplayed), []); + if (isToolsContent && toolsDisplayed) { + handleContent = ( + {React.cloneElement(children ?? <>, configToolsOn)} + ); + } + if (isToolsContent && !toolsDisplayed) { + handleContent = ; + } + const handleClick = React.useCallback(() => setToolsDisplayed(!toolsDisplayed), []); - const handleConfig = { - ...handleProps, - ...tooltipTitle, - className: isToolsContent ? "clickable" : undefined, - onClick: isToolsContent ? handleClick : undefined, - }; + const handleConfig = { + ...handleProps, + ...tooltipTitle, + className: isToolsContent ? "clickable" : undefined, + onClick: isToolsContent ? handleClick : undefined, + "data-category": category, + }; - switch (flowVersionCheck) { - case "legacy": - return {handleContent}; - case "next": - return {handleContent}; - default: - return <>; + switch (flowVersionCheck) { + case "legacy": + return {handleContent}; + case "next": + return {handleContent}; + default: + return <>; + } } -}); +); diff --git a/src/extensions/react-flow/handles/_handles.scss b/src/extensions/react-flow/handles/_handles.scss index a362b157..9ab9e4ed 100644 --- a/src/extensions/react-flow/handles/_handles.scss +++ b/src/extensions/react-flow/handles/_handles.scss @@ -4,7 +4,7 @@ div.react-flow__handle { height: $eccgui-size-block-whitespace * 0.5; color: $reactflow-node-border-color; background-color: currentcolor; - border-color: currentcolor; + border: 2px solid currentcolor; border-radius: 100%; .react-flow__node-default & { @@ -42,7 +42,7 @@ div.react-flow__handle { } } - &.#{eccgui}-graphviz__handle--highlight-configuration { + &[data-category="configuration"] { border-radius: 0; &::before { @@ -50,6 +50,28 @@ div.react-flow__handle { } } + /* + &[data-category="dependency"] { + border-radius: 0; + transform: rotate(45deg); + + &::before { + border-radius: 0; + } + } + + &[data-category="flexible"] { + } + + &[data-category="fixed"] { + background-color: white; + } + + &[data-category="unknown"] { + background-color: gray; + } + */ + .react-flow__node:hover &.connectable { &::before { display: block; diff --git a/src/extensions/react-flow/nodes/NodeContent.tsx b/src/extensions/react-flow/nodes/NodeContent.tsx index 7f21446b..d3279826 100644 --- a/src/extensions/react-flow/nodes/NodeContent.tsx +++ b/src/extensions/react-flow/nodes/NodeContent.tsx @@ -16,21 +16,17 @@ import { NodeContentExtensionProps } from "./NodeContentExtension"; import { NodeProps } from "./NodeDefault"; import { HighlightingState, NodeHighlightColor } from "./sharedTypes"; -// @deprecated use `NodeContentProps['highlightedState']` (or import from `src/extensions/react-flow/nodes/sharedTypes`) -export type { HighlightingState }; +type NodeContentHandleLegacyProps = HandleProps; -interface NodeContentHandleLegacyProps extends HandleProps { - category?: "configuration"; -} +type NodeContentHandleNextProps = HandleNextProps; -// @deprecated use `NodeContentHandleProps` -export type IHandleProps = NodeContentHandleLegacyProps; +export type NodeContentHandleProps = NodeContentHandleLegacyProps | NodeContentHandleNextProps; -export interface NodeContentHandleNextProps extends HandleNextProps { - category?: "configuration"; -} +// @deprecated use `NodeContentProps['highlightedState']` (or import from `src/extensions/react-flow/nodes/sharedTypes`) +export type { HighlightingState }; -export type NodeContentHandleProps = NodeContentHandleLegacyProps | NodeContentHandleNextProps; +// @deprecated use `HandleDefaultProps` +export type IHandleProps = NodeContentHandleLegacyProps; // @deprecated use `NodeContentProps['nodeDimensions']` export type NodeDimensions = { @@ -274,22 +270,18 @@ const addHandles = ( flowVersion: any = "legacy" ) => { return handles[position].map((handle: any, idx: any) => { - const { className, style = {}, category } = handle; + const { style = {}, ...otherHandleProps } = handle; const styleAdditions: { [key: string]: string } = { color: nodeStyle.borderColor ?? undefined, }; styleAdditions[posDirection] = (100 / (handles[position].length + 1)) * (idx + 1) + "%"; const handleProperties = { - ...handle, + ...otherHandleProps, ...{ position: handle.position ?? position, style: { ...style, ...styleAdditions }, posdirection: posDirection, isConnectable: typeof handle.isConnectable !== "undefined" ? handle.isConnectable : isConnectable, - className: category - ? (className ? className + " " : "") + - gethighlightedStateClasses(category, `${eccgui}-graphviz__handle`) - : className, }, }; return ;