move configuration type directly into handle interface and add more o…

…ptions for configuration
eccenca · Sep 6, 2023 · 14dd0bc · 14dd0bc
1 parent 6ad9e5a
commit 14dd0bc
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 56 deletions.
diff --git 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<boolean>(false);
+export const HandleDefault = memo(
+    ({ flowVersion, data, tooltip, children, category, ...handleProps }: HandleDefaultProps) => {
+        const evaluateFlowVersion = useReactFlowVersion();
+        const flowVersionCheck = flowVersion || evaluateFlowVersion;
+        const [toolsDisplayed, setToolsDisplayed] = React.useState<boolean>(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 = <HandleContent {...data}>{children}</HandleContent>;
+        const isToolsContent = children && typeof children !== "string" && children.type === HandleTools;
+        let handleContent = <HandleContent {...data}>{children}</HandleContent>;
 
-    if (isToolsContent && toolsDisplayed) {
-        handleContent = <HandleContent {...data}>{React.cloneElement(children ?? <></>, configToolsOn)}</HandleContent>;
-    }
-    if (isToolsContent && !toolsDisplayed) {
-        handleContent = <HandleContent {...data}></HandleContent>;
-    }
-    const handleClick = React.useCallback(() => setToolsDisplayed(!toolsDisplayed), []);
+        if (isToolsContent && toolsDisplayed) {
+            handleContent = (
+                <HandleContent {...data}>{React.cloneElement(children ?? <></>, configToolsOn)}</HandleContent>
+            );
+        }
+        if (isToolsContent && !toolsDisplayed) {
+            handleContent = <HandleContent {...data}></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 <HandleLegacy {...handleConfig}>{handleContent}</HandleLegacy>;
-        case "next":
-            return <HandleNext {...handleConfig}>{handleContent}</HandleNext>;
-        default:
-            return <></>;
+        switch (flowVersionCheck) {
+            case "legacy":
+                return <HandleLegacy {...handleConfig}>{handleContent}</HandleLegacy>;
+            case "next":
+                return <HandleNext {...handleConfig}>{handleContent}</HandleNext>;
+            default:
+                return <></>;
+        }
     }
-});
+);
diff --git 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,14 +42,36 @@ div.react-flow__handle {
         }
     }
 
-    &.#{eccgui}-graphviz__handle--highlight-configuration {
+    &[data-category="configuration"] {
         border-radius: 0;
 
         &::before {
             border-radius: 0;
         }
     }
 
+    /*
+    &[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
@@ -16,21 +16,17 @@ import { NodeContentExtensionProps } from "./NodeContentExtension";
 import { NodeProps } from "./NodeDefault";
 import { HighlightingState, NodeHighlightColor } from "./sharedTypes";
 
-// @deprecated use `NodeContentProps<any>['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<any>['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<any>['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 <MemoHandler flowVersion={flowVersion} {...handleProperties} key={"handle" + idx} />;