@eccenca/gui-elements 23.2.0 → 23.3.0-rc.1

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

@@ -1,16 +1,23 @@
-import React, {memo} from 'react';
-import {
-    HandleProps as ReactFlowHandleLegacyProps,
-    Handle as HandleLegacy,
-} from "react-flow-renderer";
-import {
-    HandleProps as ReactFlowHandleNextProps,
-    Handle as HandleNext,
-} from "react-flow-renderer-lts";
-import { HandleContent, HandleContentProps } from "./HandleContent";
+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 { intentClassName, IntentTypes } from "../../../common/Intent";
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+import { TooltipProps } from "../../../index";
 import { ReacFlowVersionSupportProps, useReactFlowVersion } from "../versionsupport";
 
-interface HandleExtensionProps extends ReacFlowVersionSupportProps {
+import { HandleContent, HandleContentProps } from "./HandleContent";
+
+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.
      */
@@ -19,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 {}
@@ -28,38 +38,105 @@ 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;
+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 tooltipTitle = !!tooltip ? { title: tooltip } : {};
+        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 handleContent = (
-        <HandleContent {...data}>
-            { children }
-        </HandleContent>
-    );
-
-    switch (flowVersionCheck) {
-        case "legacy":
-            return (
-                <HandleLegacy {...handleProps} {...tooltipTitle}>
-                    { handleContent }
-                </HandleLegacy>
-            );
-        case "next":
-            return (
-                <HandleNext {...handleProps} {...tooltipTitle}>
-                    { handleContent }
-                </HandleNext>
+        React.useEffect(() => {
+            const toolsTarget = handleDefaultRef.current.getElementsByClassName(
+                `${eccgui}-graphviz__handletools-target`
             );
-        default:
-            return <></>;
+            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 (handleToolsDisplayed) {
+                toolsTarget[0].click();
+            }
+        }, [handleToolsDisplayed]);
+
+        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>;
+
+        const handleConfig = {
+            ...handleProps,
+            ...tooltipTitle,
+            className: intent ? ` ${intentClassName(intent)}` : "",
+            onClick: (e: any) => {
+                if (handleProps.onClick) {
+                    handleProps.onClick(e);
+                }
+                routeClickToTools(e);
+            },
+            "data-category": category,
+            onMouseEnter: () => {
+                setExtendedTooltipDisplayed(true);
+                setHandleToolsDisplayed(false);
+            },
+            onMouseLeave: () => 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

@@ -0,0 +1,46 @@
+import React from "react";
+import { PopoverInteractionKind as BlueprintPopoverInteractionKind } from "@blueprintjs/core";
+
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+import { ContextOverlay, TestableComponent } from "../../../index";
+
+import {ContextOverlayProps} from "./../../../components/ContextOverlay/ContextOverlay";
+
+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`}
+                data-test-id={otherContextOverlayProps["data-test-id"]}
+            />
+        </ContextOverlay>
+    );
+};

package/src/extensions/react-flow/handles/_handles.scss

@@ -1,91 +1,171 @@
+$eccgui-size-flow-handle: $eccgui-size-block-whitespace * 0.7;
+$eccgui-size-flow-handle-border: $eccgui-size-flow-handle * 0.4;
+
 div.react-flow__handle {
-    color: $reactflow-node-border-color;
-    background-color: currentColor;
-    border-color: currentColor;
-    width: $eccgui-size-block-whitespace * 0.5;
-    height: $eccgui-size-block-whitespace * 0.5;
     z-index: 2;
+    width: $eccgui-size-flow-handle;
+    height: $eccgui-size-flow-handle;
+    color: $reactflow-node-border-color;
+    background-color: currentcolor;
+    border: 2px solid currentcolor;
     border-radius: 100%;
 
+    &.eccgui-intent--primary {
+        color: $eccgui-color-primary;
+    }
+
+    &.eccgui-intent--accent {
+        color: $eccgui-color-accent;
+    }
+
+    &.eccgui-intent--success {
+        color: $eccgui-color-success-text;
+    }
+
+    &.eccgui-intent--info {
+        color: $eccgui-color-info-text;
+    }
+
+    &.eccgui-intent--warning {
+        color: $eccgui-color-warning-text;
+    }
+
+    &.eccgui-intent--danger {
+        color: $eccgui-color-danger-text;
+    }
+
     .react-flow__node-default & {
-        background-color: currentColor;
+        background-color: currentcolor;
     }
 
-    &:before {
-        content: " ";
+    &::before {
         position: absolute;
-        //width: $eccgui-size-block-whitespace;
-        //height: $eccgui-size-block-whitespace;
-        top: $eccgui-size-block-whitespace * -0.5;
-        left: $eccgui-size-block-whitespace * -0.5;
-        bottom: $eccgui-size-block-whitespace * -0.5;
-        right: $eccgui-size-block-whitespace * -0.5;
-        opacity: 0.61;
+        inset: $eccgui-size-flow-handle * -0.75;
+        z-index: -1;
         display: none;
-        background-color: currentColor;
-        border: solid 1px currentColor;
+        content: " ";
+        background-color: transparent;
+        border: solid $eccgui-size-flow-handle * 0.75 currentcolor;
         border-radius: 100%;
+        opacity: 0.61;
+    }
+
+    &:is(
+        // Polyfill for FF that does not support the `:has()` pseudo selector until at least version 119 or 120
+        // usally `&:has(.#{$eccgui}-graphviz__handletools-target)` should be enough
+        // need to be re-evaluated then
+        .ffpolyfill-has-#{$eccgui}-graphviz__handletools-target,
+        div:has(.#{$eccgui}-graphviz__handletools-target)
+    ) {
+        &::after {
+            position: absolute;
+            inset: 0;
+            display: none;
+            cursor: pointer;
+            content: " ";
+            border-radius: 100%;
+            outline: dotted $eccgui-size-flow-handle-border currentcolor;
+            outline-offset: $eccgui-size-flow-handle * 0.75 + $eccgui-size-flow-handle-border * 0.5;
+
+            .react-flow__node:hover & {
+                display: block;
+            }
+        }
     }
 
     &:hover {
-        &:before {
-            box-shadow: 0 0 $eccgui-size-block-whitespace * 0.5 $eccgui-size-block-whitespace * 0.25 currentColor;
+        &::before {
+            box-shadow: 0 0 $eccgui-size-flow-handle $eccgui-size-flow-handle * 0.5 currentcolor;
         }
     }
 
-    &.#{eccgui}-graphviz__handle--highlight-configuration {
+    &[data-category="configuration"] {
         border-radius: 0;
 
-        &:before {
+        &::after,
+        &::before {
+            border-radius: 0;
+            transform: scale(0.9);
+        }
+    }
+
+    &[data-category="dependency"] {
+        background-color: color-mix(in srgb, currentcolor 39%, white);
+        border-radius: 0;
+        transform: rotate(45deg);
+
+        &[data-category="dependency"].react-flow__handle-left {
+            transform-origin: 125% 100%;
+        }
+
+        &[data-category="dependency"].react-flow__handle-right {
+            transform-origin: 75% -50%;
+        }
+
+        &::after,
+        &::before {
             border-radius: 0;
+            transform: scale(0.9);
         }
     }
 
+    &[data-category="flexible"] {
+        background-color: white;
+    }
+
+    &[data-category="fixed"] {
+        border-color: currentcolor; // no change, only here to have a "fixed" rule
+    }
+
+    &[data-category="unknown"] {
+        background-color: color-mix(in srgb, currentcolor 39%, white);
+    }
+
     .react-flow__node:hover &.connectable {
-        &:before {
+        &::before {
             display: block;
         }
     }
 
-    &.react-flow__handle-connecting:hover, &.invalid-handle {
+    &.react-flow__handle-connecting:hover,
+    &.invalid-handle {
         color: $eccgui-color-danger-text;
-        &:before {
+
+        &::before {
             display: block;
         }
     }
 
-    &.react-flow__handle-valid:hover, &.valid-handle {
+    &.react-flow__handle-valid:hover,
+    &.valid-handle {
         color: $eccgui-color-success-text;
     }
 }
 
 .#{$eccgui}-graphviz__handle__content {
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    cursor: help;
+    inset: 0;
     overflow: hidden;
+    cursor: help;
 }
 
 div.react-flow__handle-right {
-    right: -1 * $eccgui-size-block-whitespace * 0.5;
+    right: -1 * $eccgui-size-flow-handle;
     transform: translateX(-50%) translateY(-50%);
 }
 
 div.react-flow__handle-left {
-    left: -1 * $eccgui-size-block-whitespace * 0.5;
+    left: -1 * $eccgui-size-flow-handle;
     transform: translateX(50%) translateY(-50%);
 }
 
 div.react-flow__handle-top {
-    top: -1 * $eccgui-size-block-whitespace * 0.5;
+    top: -1 * $eccgui-size-flow-handle;
     transform: translateX(-50%) translateY(50%);
 }
 
 div.react-flow__handle-bottom {
-    bottom: -1 * $eccgui-size-block-whitespace * 0.5;
+    bottom: -1 * $eccgui-size-flow-handle;
     transform: translateX(-50%) translateY(-50%);
 }
 
@@ -93,28 +173,22 @@ div.react-flow__handle-bottom {
 .#{$eccgui}-graphviz__node--minimal-circular {
     .react-flow__node:not(.selected) & {
         & ~ .react-flow__handle {
-            top: 50%;
-            left: $reactflow-node-basesize * 0.5;
-            right: auto;
-            bottom: auto;
-            transform: translateX(-50%) translateY(-50%);
+            inset: 50% auto auto $reactflow-node-basesize * 0.5;
             z-index: 0;
-            opacity: 0;
-            height: $reactflow-node-basesize;
             width: $reactflow-node-basesize;
+            height: $reactflow-node-basesize;
+            opacity: 0;
+            transform: translateX(-50%) translateY(-50%);
         }
     }
 
     & ~ .react-flow__handle:not(.connectable) {
-        top: 50%;
-        left: $reactflow-node-basesize * 0.5;
-        right: auto;
-        bottom: auto;
-        transform: translateX(-50%) translateY(-50%);
+        inset: 50% auto auto $reactflow-node-basesize * 0.5;
         z-index: 0;
-        opacity: 0;
-        height: $reactflow-node-basesize;
         width: $reactflow-node-basesize;
+        height: $reactflow-node-basesize;
+        opacity: 0;
+        transform: translateX(-50%) translateY(-50%);
     }
 }
 
@@ -132,23 +206,34 @@ div.react-flow__handle-bottom {
 
 .#{$eccgui}-graphviz__node--hidehandles {
     & ~ .react-flow__handle:not(.connectable) {
-        height: 1px;
+        z-index: -1;
         width: 1px;
+        height: 1px;
         visibility: hidden;
         border: none;
-        z-index: -1;
 
         &.react-flow__handle-top {
             top: 0;
         }
+
         &.react-flow__handle-right {
             right: 0;
         }
+
         &.react-flow__handle-bottom {
             bottom: 0;
         }
+
         &.react-flow__handle-left {
             left: 0;
         }
     }
 }
+
+.#{$eccgui}-graphviz__handletools-target {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}

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

@@ -1,21 +1,37 @@
-import React, { useState, useEffect, useCallback } from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { ReactFlow, HandleDefault, HandleProps } from "./../../../../../index";
-import { Elements, ReactFlowProvider } from 'react-flow-renderer';
+import React, { useCallback, useEffect, useState } from "react";
+import { Elements, ReactFlowProvider } from "react-flow-renderer";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { Definitions } from "../../../../common/Intent";
+
+import {
+    Button,
+    HandleDefault,
+    HandleProps,
+    HandleTools,
+    Menu,
+    MenuItem,
+    ReactFlow,
+    SimpleDialog,
+} from "./../../../../../index";
 import { edgeTypes } from "./../../edges/edgeTypes";
 
 const HandleDefaultDataProps = (data: HandleProps["data"]) => {
     // this is only a mock to get it as sub element in the table
     return <>{data.extendedTooltip}</>;
-}
+};
 
 export default {
-    title: "Extensions/React Flow/Default Handle",
+    title: "Extensions/React Flow/Handle",
     component: HandleDefault,
-    subcomponents: { HandleDefaultDataProps },
+    subcomponents: { HandleDefaultDataProps, HandleTools },
     argTypes: {
+        intent: {
+            control: "select",
+            options: { "Not set": undefined, ...Definitions },
+        },
     },
-} as ComponentMeta<typeof HandleDefault>;
+} as Meta<typeof HandleDefault>;
 
 const HandleDefaultExample = (args: any) => {
     const [reactflowInstance, setReactflowInstance] = useState(null);
@@ -30,9 +46,7 @@ const HandleDefaultExample = (args: any) => {
                     label: "Default ",
                     content: "Example content.",
                     minimalShape: "none",
-                    handles: [
-                        { ...args }
-                    ],
+                    handles: [{ ...args }],
                 },
                 position: { x: 50, y: 200 },
             },
@@ -48,24 +62,54 @@ const HandleDefaultExample = (args: any) => {
         [reactflowInstance]
     );
 
-    return <ReactFlowProvider>
-        <ReactFlow
-            elements={elements}
-            style={{ height: '400px' }}
-            onLoad={onLoad}
-            edgeTypes={ edgeTypes }
-            defaultZoom={1}
-        />
-    </ReactFlowProvider>
-}
+    return (
+        <ReactFlowProvider>
+            <ReactFlow
+                elements={elements}
+                style={{ height: "400px" }}
+                onLoad={onLoad}
+                edgeTypes={edgeTypes}
+                defaultZoom={1}
+            />
+        </ReactFlowProvider>
+    );
+};
 
-const Template: ComponentStory<typeof HandleDefault> = (args) => (
-    <HandleDefaultExample {...args} />
-);
+const HandleTestMenu = () => {
+    const [menuOpen, setMenuOpen] = useState<boolean>(false);
+
+    return (
+        <>
+            <HandleTools>
+                <Menu>
+                    <MenuItem onClick={() => alert("Thank you for the click!")} text={"Click me!"} />
+                    <MenuItem onClick={() => setMenuOpen(!menuOpen)} text="Open modal" />
+                </Menu>
+            </HandleTools>
+            <SimpleDialog isOpen={menuOpen} actions={<Button onClick={() => setMenuOpen(false)}>Close</Button>}>
+                Open modal.
+            </SimpleDialog>
+        </>
+    );
+};
+
+const Template: StoryFn<typeof HandleDefault> = (args) => <HandleDefaultExample {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
     type: "target",
     tooltip: "this is a target handle",
-    isConnectable: false,
+    isConnectable: true,
+    onClick: () => alert("Clicked handle."),
+};
+
+export const UsingHandleTools = Template.bind({});
+UsingHandleTools.args = {
+    type: "source",
+    tooltip: "this is a handle with tools overlay",
+    isConnectable: true,
+    children: <HandleTestMenu />,
+    data: {
+        extendedTooltip: "This is another Tooltip",
+    },
 };

package/src/extensions/react-flow/index.ts

@@ -7,6 +7,8 @@ export * from "./nodes/NodeContentExtension";
 export * from "./nodes/NodeTools";
 export * from "./nodes/nodeUtils";
 export * from "./handles/HandleDefault";
+export * from "./handles/HandleContent";
+export * from "./handles/HandleTools";
 export * from "./edges/EdgeDefault";
 export * from "./edges/EdgeStep";
 export * from "./edges/EdgeTools";