@eccenca/gui-elements 23.3.0-rc.0 → 23.3.0

package/src/extensions/react-flow/edges/_edges.scss

@@ -3,23 +3,31 @@
     --#{$eccgui}-reactflow-node-color-hover: #{$reactflow-edge-stroke-color-hover};
     --#{$eccgui}-reactflow-node-color-selected: #{$reactflow-edge-stroke-color-selected};
 
-    stroke: var(--#{$eccgui}-reactflow-node-color-default);
     color: var(--#{$eccgui}-reactflow-node-color-default);
 
-    path[class*="react-flow__edge"], rect[class*="react-flow__edge"] {
-        shape-rendering: optimizeSpeed;
+    // stroke: var(--#{$eccgui}-reactflow-node-color-default); // removed, probably not necessary
+
+    path[class*="react-flow__edge"],
+    rect[class*="react-flow__edge"] {
         stroke-opacity: $reactflow-edge-stroke-opacity-default;
+        shape-rendering: optimizespeed;
     }
 
     text[class*="react-flow__edge"] {
         opacity: $reactflow-edge-stroke-opacity-default;
     }
 
+    .react-flow__edge-textbg {
+        stroke: currentcolor;
+    }
+
     &:hover {
-        stroke: var(--#{$eccgui}-reactflow-node-color-hover);
         color: var(--#{$eccgui}-reactflow-node-color-hover);
 
-        path[class*="react-flow__edge"], rect[class*="react-flow__edge"] {
+        // stroke: var(--#{$eccgui}-reactflow-node-color-hover); // removed, probably not necessary
+
+        path[class*="react-flow__edge"],
+        rect[class*="react-flow__edge"] {
             stroke-opacity: $reactflow-edge-stroke-opacity-hover;
         }
 
@@ -29,10 +37,11 @@
     }
 
     &.selected {
-        stroke: var(--#{$eccgui}-reactflow-node-color-selected);
         color: var(--#{$eccgui}-reactflow-node-color-selected);
+        stroke: var(--#{$eccgui}-reactflow-node-color-selected);
 
-        path[class*="react-flow__edge"], rect[class*="react-flow__edge"] {
+        path[class*="react-flow__edge"],
+        rect[class*="react-flow__edge"] {
             stroke-opacity: $reactflow-edge-stroke-opacity-selected;
         }
 
@@ -43,19 +52,19 @@
 }
 
 path.react-flow__edge-path {
-    stroke-width: 2;
-    stroke: currentColor;
+    stroke: currentcolor;
     stroke-opacity: $reactflow-edge-stroke-opacity-default;
+    stroke-width: 2;
 
     .react-flow__edge.selected & {
+        stroke: currentcolor;
         stroke-width: 2;
-        stroke: currentColor;
     }
 }
 
 path.react-flow__edge-path-glow {
-    stroke: currentColor;
     fill: none;
+    stroke: currentcolor;
     stroke-linecap: round;
 
     .react-flow__edge & {
@@ -77,9 +86,9 @@ path.react-flow__edge-path-glow {
 }
 
 .react-flow__edgeupdater {
-    stroke: currentColor;
-    fill: currentColor;
     opacity: 0;
+    fill: currentcolor;
+    stroke: currentcolor;
 
     &:hover {
         opacity: 0.05;
@@ -87,13 +96,10 @@ path.react-flow__edge-path-glow {
 }
 
 .react-flow__edge-text {
-    fill: currentColor;
+    fill: currentcolor;
     stroke: none;
 }
 
-.react-flow__edge-textbg {
-}
-
 // Stroke types
 
 path.react-flow__edge-path--stroke-solid {
@@ -111,16 +117,16 @@ path.react-flow__edge-path--stroke-dotted,
 }
 
 path.react-flow__edge-path--stroke-double {
+    filter: drop-shadow(1px 1px 1px currentcolor) drop-shadow(-1px -1px 1px currentcolor);
     stroke: #fff !important;
     stroke-opacity: 1 !important;
-    filter: drop-shadow(1px 1px 1px currentColor) drop-shadow(-1px -1px 1px currentColor);
 }
 
 path.react-flow__edge-path--stroke-doubledashed {
+    filter: drop-shadow(1px 1px 1px currentcolor) drop-shadow(-1px -1px 1px currentcolor);
     stroke: #fff !important;
-    stroke-opacity: 1 !important;
-    filter: drop-shadow(1px 1px 1px currentColor) drop-shadow(-1px -1px 1px currentColor);
     stroke-dasharray: 5;
+    stroke-opacity: 1 !important;
 }
 
 // Intent states
@@ -165,13 +171,12 @@ g.#{$eccgui}-intent--danger {
 // Highlightning
 
 path.react-flow__edge-path-highlight {
-    stroke-opacity: 1;
+    filter: drop-shadow(2px -2px 1px var(--edge-highlight-default-color))
+        drop-shadow(-2px 2px 1px var(--edge-highlight-alternate-color, var(--edge-highlight-default-color)));
     fill: none;
-    stroke-linecap: round;
     stroke: #fff;
-    filter:
-        drop-shadow(2px -2px 1px var(--edge-highlight-default-color))
-        drop-shadow(-2px 2px 1px var(--edge-highlight-alternate-color, var(--edge-highlight-default-color)));
+    stroke-linecap: round;
+    stroke-opacity: 1;
 }
 
 .#{$eccgui}-graphviz__edge--highlight-default {
@@ -189,16 +194,8 @@ path.react-flow__edge-path-highlight {
     --edge-highlight-alternate-color: #{$eccgui-color-primary};
 }
 
-
-
 // Type colors
 
-.react-flow__edge-default,
-.react-flow__edge-straight,
-.react-flow__edge-smoothstep,
-.react-flow__edge-step {
-}
-
 .react-flow__edge-success {
     --#{$eccgui}-reactflow-node-color-default: #{$eccgui-color-success-text};
     --#{$eccgui}-reactflow-node-color-hover: #{$eccgui-color-success-text};
@@ -221,34 +218,29 @@ path.react-flow__edge-path-highlight {
 
 .#{$eccgui}-graphviz__edgetools-target {
     position: fixed;
+    z-index: 1000;
     width: $eccgui-size-block-whitespace * 2;
     height: $eccgui-size-block-whitespace * 2;
-    //margin-left: -1 * $eccgui-size-block-whitespace;
     margin-top: -1 * $eccgui-size-block-whitespace;
-    z-index: 1000;
-}
-
-.#{$eccgui}-graphviz__edgetools-overlay {
-    //transform: translate(#{$eccgui-size-block-whitespace}, #{-1 * $eccgui-size-block-whitespace});
 }
 
 .#{$eccgui}-graphviz__edgetools-content {
-    padding: $eccgui-size-block-whitespace * 0.5;
-    max-width: $reactflow-node-basesize * 8;
     min-width: $reactflow-node-basesize;
-    max-height: $reactflow-node-basesize * 13;
+    max-width: $reactflow-node-basesize * 8;
     min-height: $reactflow-node-basesize;
+    max-height: $reactflow-node-basesize * 13;
+    padding: $eccgui-size-block-whitespace * 0.5;
 }
 
 // Arrows
 
 .react-flow__arrowhead {
     polyline {
-        stroke-width: 1px;
+        fill: currentcolor;
+        stroke: currentcolor;
         stroke-linecap: square;
         stroke-linejoin: miter;
-        stroke: currentColor;
-        fill: currentColor;
+        stroke-width: 1px;
         transform: scale(1.75, 0.75);
     }
 }
@@ -256,54 +248,57 @@ path.react-flow__edge-path-highlight {
 // Custom label
 
 .#{$eccgui}-graphviz__edge-label {
-    border: 0.5*$reactflow-node-border-width solid currentColor;
-    border-radius: $reactflow-node-border-radius;
-    background: #fff; // TODO color
-    color: currentColor;
+    --#{$eccgui}-reactflow-edge-label-color: currentcolor;
+    --#{$eccgui}-reactflow-edge-label-color-background: #{$card-background-color};
+
     display: inline-flex;
     align-items: center;
     width: auto;
     max-width: 20rem;
     height: 0.5 * $reactflow-node-largesize;
     font-size: $reactflow-node-font-size;
+    color: var(--#{$eccgui}-reactflow-edge-label-color, currentColor);
+    background-color: var(--#{$eccgui}-reactflow-edge-label-color-background, #{$card-background-color});
+    border: 0.5 * $reactflow-node-border-width solid transparent;
+    border-color: var(--#{$eccgui}-reactflow-edge-label-color, currentColor);
+    border-radius: $reactflow-node-border-radius;
+
+    &.#{$eccgui}-graphviz__edge-label--loose {
+        background-color: transparent;
+        border: none;
+    }
 
     &.#{$eccgui}-intent--primary {
-        color: $eccgui-color-primary;
-        border-color: $eccgui-color-primary;
+        --#{$eccgui}-reactflow-edge-label-color: #{$eccgui-color-primary};
     }
     &.#{$eccgui}-intent--accent {
-        color: $eccgui-color-accent;
-        border-color: $eccgui-color-accent;
+        --#{$eccgui}-reactflow-edge-label-color: #{$eccgui-color-accent};
     }
     &.#{$eccgui}-intent--success {
-        color: $eccgui-color-success-text;
-        border-color: $eccgui-color-success-text;
+        --#{$eccgui}-reactflow-edge-label-color: #{$eccgui-color-success-text};
     }
     &.#{$eccgui}-intent--info {
-        color: $eccgui-color-info-text;
-        border-color: $eccgui-color-info-text;
+        --#{$eccgui}-reactflow-edge-label-color: #{$eccgui-color-info-text};
     }
     &.#{$eccgui}-intent--warning {
-        color: $eccgui-color-warning-text;
-        border-color: $eccgui-color-warning-text;
+        --#{$eccgui}-reactflow-edge-label-color: #{$eccgui-color-warning-text};
     }
     &.#{$eccgui}-intent--danger {
-        color: $eccgui-color-danger-text;
-        border-color: $eccgui-color-danger-text;
+        --#{$eccgui}-reactflow-edge-label-color: #{$eccgui-color-danger-text};
     }
 }
 .#{$eccgui}-graphviz__edge-label--large {
     height: $reactflow-node-largesize;
 }
 .#{$eccgui}-graphviz__edge-label--fullwidth {
-    max-width: none;
     width: 100%;
+    max-width: none;
 }
 .#{$eccgui}-graphviz__edge-label__depiction {
-    margin-left: 2px;
     display: inline-flex;
     flex-grow: 0;
     flex-shrink: 0;
+    margin-left: 2px;
     .#{$eccgui}-depiction__image {
         height: calc(#{0.5 * $reactflow-node-largesize} - 4px);
 
@@ -313,20 +308,20 @@ path.react-flow__edge-path-highlight {
     }
 }
 .#{$eccgui}-graphviz__edge-label__text {
-    margin: 0 $eccgui-size-block-whitespace * 0.25;
     flex-grow: 1;
     flex-shrink: 1;
-    white-space: nowrap;
+    margin: 0 $eccgui-size-block-whitespace * 0.25;
     overflow: hidden;
-    text-overflow: ellipsis;
     text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 
     .#{$eccgui}-graphviz__edge-label--fullwidth & {
         text-align: left;
     }
 }
 .#{$eccgui}-graphviz__edge-label__aux {
-    margin-right: $eccgui-size-block-whitespace * 0.25;
     flex-grow: 0;
     flex-shrink: 0;
+    margin-right: $eccgui-size-block-whitespace * 0.25;
 }

package/src/extensions/react-flow/handles/HandleContent.tsx

@@ -1,6 +1,7 @@
-import React, {memo} from 'react';
+import React, { memo } from "react";
+
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
-import { Tooltip } from "../../../index";
+import { Tooltip, TooltipProps } from "../../../index";
 
 export interface HandleContentProps {
     children?: JSX.Element | string;
@@ -8,31 +9,31 @@ export interface HandleContentProps {
      * Tooltip displayed as overlay on hover.
      */
     extendedTooltip?: JSX.Element | string;
+    /**
+     * Configure the tooltip and overwrite automatically set options.
+     */
+    tooltipProps?: Omit<TooltipProps, "content" | "children" | "renderTarget">;
 }
 
-export const HandleContent = memo(({
-    children,
-    extendedTooltip
-}: HandleContentProps) => {
-    const handleContent = !!children ? (
-        <div className={`${eccgui}-graphviz__handle__content`}>
-            { children }
-        </div>
-    ) : !!extendedTooltip ? (
+export const HandleContent = memo(({ children, extendedTooltip, tooltipProps }: HandleContentProps) => {
+    const handleContent = children ? (
+        <div className={`${eccgui}-graphviz__handle__content`}>{children}</div>
+    ) : extendedTooltip ? (
         <div className={`${eccgui}-graphviz__handle__content`} />
     ) : (
         <></>
     );
 
-    if (!!extendedTooltip) {
+    if (extendedTooltip && tooltipProps?.isOpen) {
         return (
             <Tooltip
                 content={extendedTooltip}
                 autoFocus={false}
                 enforceFocus={false}
                 openOnTargetFocus={false}
+                {...tooltipProps}
             >
-                { handleContent }
+                {handleContent}
             </Tooltip>
         );
     }

package/src/extensions/react-flow/handles/HandleDefault.tsx

@@ -1,14 +1,23 @@
 import React, { memo } from "react";
 import { Handle as HandleLegacy, HandleProps as ReactFlowHandleLegacyProps } from "react-flow-renderer";
 import { Handle as HandleNext, HandleProps as ReactFlowHandleNextProps } from "react-flow-renderer-lts";
-import { PopoverInteractionKind as BlueprintPopoverInteractionKind } from "@blueprintjs/core";
 
+import { intentClassName, IntentTypes } from "../../../common/Intent";
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+import { TooltipProps } from "../../../index";
 import { ReacFlowVersionSupportProps, useReactFlowVersion } from "../versionsupport";
 
 import { HandleContent, HandleContentProps } from "./HandleContent";
-import { HandleTools } from "./HandleTools";
 
-interface HandleExtensionProps extends ReacFlowVersionSupportProps {
+export type HandleCategory = "configuration" | "flexible" | "fixed" | "unknown" | "dependency";
+
+interface HandleExtensionProps
+    extends ReacFlowVersionSupportProps,
+        Omit<React.HTMLAttributes<HTMLDivElement>, "id" | "children"> {
+    /**
+     * Defines the handle category, mainly used to adjust layout.
+     */
+    category?: HandleCategory;
     /**
      * Extended handle data.
      */
@@ -17,8 +26,11 @@ interface HandleExtensionProps extends ReacFlowVersionSupportProps {
      * Simple text tooltip displayed as title on hover.
      */
     tooltip?: string;
-    children?: JSX.Element | string;
-    onClick?: () => void;
+    /**
+     * Feedback state of the handle.
+     */
+    intent?: IntentTypes;
+    children?: HandleContentProps["children"];
 }
 
 export interface HandleProps extends HandleExtensionProps, ReactFlowHandleLegacyProps {}
@@ -26,47 +38,118 @@ 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, intent, ...handleProps }: HandleDefaultProps) => {
+        const evaluateFlowVersion = useReactFlowVersion();
+        const flowVersionCheck = flowVersion || evaluateFlowVersion;
+        const handleDefaultRef = React.useRef<any>();
+        const [extendedTooltipDisplayed, setExtendedTooltipDisplayed] = React.useState<boolean>(false);
+        const [handleToolsDisplayed, setHandleToolsDisplayed] = React.useState<boolean>(false);
 
-    const handleClosing = () => {
-        setToolsDisplayed(false);
-    };
+        const routeClickToTools = React.useCallback(
+            (e: Event) => {
+                const toolsTarget = handleDefaultRef.current.getElementsByClassName(
+                    `${eccgui}-graphviz__handletools-target`
+                );
+                if (toolsTarget.length > 0 && e.target === handleDefaultRef.current) {
+                    setHandleToolsDisplayed(true);
+                    setExtendedTooltipDisplayed(false);
+                }
+            },
+            [handleDefaultRef]
+        );
 
-    const tooltipTitle = tooltip ? { title: tooltip } : {};
-    const configToolsOn = {
-        defaultIsOpen: true,
-        autoFocus: true,
-        interactionKind: BlueprintPopoverInteractionKind.HOVER,
-        onClosing: handleClosing,
-    };
+        React.useEffect(() => {
+            const toolsTarget = handleDefaultRef.current.getElementsByClassName(
+                `${eccgui}-graphviz__handletools-target`
+            );
+            if (toolsTarget && toolsTarget[0] && handleToolsDisplayed) {
+                toolsTarget[0].click();
+            }
+        }, [handleToolsDisplayed]);
 
-    const isToolsContent = children && typeof children !== "string" && children.type === HandleTools;
-    let handleContent = <HandleContent {...data}>{children}</HandleContent>;
+        React.useEffect(() => {
+            const toolsTarget = handleDefaultRef.current.getElementsByClassName(
+                `${eccgui}-graphviz__handletools-target`
+            );
+            if (toolsTarget && toolsTarget[0]) {
+                // Polyfill for FF that does not support the `:has()` pseudo selector until at least version 119 or 120
+                // need to be re-evaluated then
+                // @see https://connect.mozilla.org/t5/ideas/when-is-has-css-selector-going-to-be-fully-implemented-in/idi-p/23794
+                handleDefaultRef.current.classList.add(`ffpolyfill-has-${eccgui}-graphviz__handletools-target`);
+            }
+        });
 
-    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,
-    };
-
-    switch (flowVersionCheck) {
-        case "legacy":
-            return <HandleLegacy {...handleConfig}>{handleContent}</HandleLegacy>;
-        case "next":
-            return <HandleNext {...handleConfig}>{handleContent}</HandleNext>;
-        default:
-            return <></>;
+        const tooltipTitle = tooltip ? { title: tooltip } : {};
+
+        const handleContentTooltipProps = {
+            placement:
+                handleProps.position === "left" || handleProps.position === "right"
+                    ? `${handleProps.position}-end`
+                    : undefined,
+            modifiers: {
+                offset: {
+                    enabled: true,
+                    options: {
+                        offset: [3, 20],
+                    },
+                },
+            },
+            intent: intent,
+            className: `${eccgui}-graphviz__handle__tooltip-target`,
+            isOpen: extendedTooltipDisplayed && !handleToolsDisplayed,
+        };
+
+        const handleContentProps = {
+            ...data,
+            tooltipProps: {
+                ...handleContentTooltipProps,
+                ...data?.tooltipProps,
+            } as TooltipProps,
+        };
+
+        const handleContent = <HandleContent {...handleContentProps}>{children}</HandleContent>;
+
+        let switchTooltipTimerOn: ReturnType<typeof setTimeout>;
+        const handleConfig = {
+            ...handleProps,
+            ...tooltipTitle,
+            className: intent ? `${intentClassName(intent)} ` : "",
+            onClick: (e: any) => {
+                if (handleProps.onClick) {
+                    handleProps.onClick(e);
+                }
+                routeClickToTools(e);
+            },
+            "data-category": category,
+            onMouseEnter: () => {
+                switchTooltipTimerOn = setTimeout(
+                    () => setExtendedTooltipDisplayed(true),
+                    data?.tooltipProps?.hoverOpenDelay ?? 500
+                );
+                setHandleToolsDisplayed(false);
+            },
+            onMouseLeave: () => {
+                if (switchTooltipTimerOn) clearTimeout(switchTooltipTimerOn);
+                setExtendedTooltipDisplayed(false);
+            },
+        };
+
+        switch (flowVersionCheck) {
+            case "legacy":
+                return (
+                    <HandleLegacy ref={handleDefaultRef} {...handleConfig}>
+                        {handleContent}
+                    </HandleLegacy>
+                );
+            case "next":
+                return (
+                    <HandleNext ref={handleDefaultRef} {...handleConfig}>
+                        {handleContent}
+                    </HandleNext>
+                );
+            default:
+                return <></>;
+        }
     }
-});
+);

package/src/extensions/react-flow/handles/HandleTools.tsx

@@ -1,22 +1,46 @@
 import React from "react";
+import { PopoverInteractionKind as BlueprintPopoverInteractionKind } from "@blueprintjs/core";
 
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
-import { ContextOverlay } from "../../../index";
+import { ContextOverlay, TestableComponent } from "../../../index";
 
-import { ContextOverlayProps } from "./../../../components/ContextOverlay/ContextOverlay";
+import {ContextOverlayProps} from "./../../../components/ContextOverlay/ContextOverlay";
 
-export interface HandleToolsProps extends Omit<ContextOverlayProps, "children" | "content" | "popoverClassName"> {
+export interface HandleToolsProps
+    extends Omit<ContextOverlayProps, "children" | "content" | "popoverClassName">,
+        TestableComponent {
     children: string | JSX.Element | JSX.Element[];
 }
 
 export const HandleTools = ({ children, ...otherContextOverlayProps }: HandleToolsProps) => {
+    const [toolsDisplayed, setToolsDisplayed] = React.useState<boolean>(false);
+
+    const configToolsDisplayed = toolsDisplayed
+        ? {
+              defaultIsOpen: true,
+              autoFocus: true,
+              interactionKind: BlueprintPopoverInteractionKind.HOVER,
+              onClosing: () => setToolsDisplayed(false),
+          }
+        : {
+              onOpening: () => {
+                  setToolsDisplayed(true);
+              },
+          };
+
     return (
         <ContextOverlay
+            hoverCloseDelay={500}
+            {...configToolsDisplayed}
             {...otherContextOverlayProps}
             content={<div className={`${eccgui}-graphviz__handletools-content`}>{children}</div>}
+            className={`${eccgui}-graphviz__handletools-target`}
             popoverClassName={`${eccgui}-graphviz__handletools-overlay`}
         >
-            <div className={`${eccgui}-graphviz__handletools-target`} />
+            <div
+                className={`${eccgui}-graphviz__handletools-target`}
+                data-test-id={otherContextOverlayProps["data-test-id"]}
+            />
         </ContextOverlay>
     );
 };