@eccenca/gui-elements 24.4.1-featurechatcomponentscmem6775.4 → 24.4.1-featurepreparefinalnextcmem6943.1

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

@@ -1,6 +1,5 @@
 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 { Handle as HandleV9, HandleProps as ReactFlowHandleV9Props } from "react-flow-renderer";
 import { Handle as HandleV12, HandleProps as ReactFlowHandleV12Props } from "@xyflow/react";
 import { Classes as BlueprintClasses } from "@blueprintjs/core";
 
@@ -10,6 +9,7 @@ import { TooltipProps } from "../../../index";
 import { ReacFlowVersionSupportProps, useReactFlowVersion } from "../versionsupport";
 
 import { HandleContent, HandleContentProps } from "./HandleContent";
+import {Intent} from "@blueprintjs/core/src/common/intent";
 
 export type HandleCategory = "configuration" | "flexible" | "fixed" | "unknown" | "dependency";
 
@@ -35,33 +35,44 @@ interface HandleExtensionProps
     children?: HandleContentProps["children"];
 }
 
-export interface HandleProps extends HandleExtensionProps, ReactFlowHandleLegacyProps {}
-export interface HandleNextProps extends HandleExtensionProps, ReactFlowHandleNextProps {}
+/**
+ * @deprecated (v26) use only `HandleDefaultProps`
+ */
+export interface HandleV9Props extends HandleExtensionProps, ReactFlowHandleV9Props {}
+/**
+ * @deprecated (v26) use only `HandleDefaultProps`
+ */
 export interface HandleV12Props extends HandleExtensionProps, ReactFlowHandleV12Props {}
-export type HandleDefaultProps = HandleProps | HandleNextProps | HandleV12Props;
+
+/**
+ * Combined interface, later this will be only a copy of `HandleV12Props`.
+ */
+export type HandleDefaultProps = HandleV9Props | HandleV12Props;
 
 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 handleDefaultRef = React.useRef<HTMLDivElement>(null);
         const [extendedTooltipDisplayed, setExtendedTooltipDisplayed] = React.useState<boolean>(false);
 
-        let toolsTarget: HTMLElement[];
+        let toolsTarget: HTMLCollectionOf<Element>;
 
         React.useEffect(() => {
-            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 (handleDefaultRef.current) {
+                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`);
+                }
             }
         });
 
         const tooltipTitle = tooltip ? { title: tooltip } : {};
 
-        const handleContentTooltipProps = {
+        const handleContentTooltipProps: Partial<TooltipProps> = {
             placement:
                 handleProps.position === "left" || handleProps.position === "right"
                     ? `${handleProps.position}-end`
@@ -74,39 +85,39 @@ export const HandleDefault = memo(
                     },
                 },
             },
-            intent: intent,
+            intent: intent as Intent,
             className: `${eccgui}-graphviz__handle__tooltip-target`,
             isOpen: extendedTooltipDisplayed,
-        };
+        }
 
-        const handleContentProps = {
+        const handleContentProps = React.useMemo(() => ({
             ...data,
             tooltipProps: {
                 ...handleContentTooltipProps,
                 ...data?.tooltipProps,
             } as TooltipProps,
-        };
+        }), [intent, category, handleProps.isConnectable])
 
-        const handleContent = <HandleContent {...handleContentProps}>{children}</HandleContent>;
+        const handleContent = React.useMemo(() => <HandleContent {...handleContentProps}>{children}</HandleContent>, [])
 
         let switchTooltipTimerOn: ReturnType<typeof setTimeout>;
         let switchToolsTimerOff: ReturnType<typeof setTimeout>;
 
-        const handleConfig = {
+        const handleConfig =  React.useMemo(() => ({
             ...handleProps,
             ...tooltipTitle,
-            className: intent ? `${intentClassName(intent)} ` : "",
-            onClick: (e: any) => {
+            className: intent ? `${intentClassName(intent)} ` : "" + ` ${eccgui}-graphviz__handle ${eccgui}-graphviz__handle--${flowVersionCheck}`,
+            onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
                 if (handleProps.onClick) {
                     handleProps.onClick(e);
                 }
                 if (toolsTarget.length > 0 && e.target === handleDefaultRef.current) {
                     setExtendedTooltipDisplayed(false);
-                    toolsTarget[0].click();
+                    (toolsTarget[0] as HTMLElement).click();
                 }
             },
             "data-category": category,
-            onMouseEnter: (e: any) => {
+            onMouseEnter: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
                 if (switchToolsTimerOff) clearTimeout(switchToolsTimerOff);
                 if (e.target === handleDefaultRef.current) {
                     switchTooltipTimerOn = setTimeout(
@@ -118,24 +129,18 @@ export const HandleDefault = memo(
             onMouseLeave: () => {
                 if (switchTooltipTimerOn) clearTimeout(switchTooltipTimerOn);
                 if (toolsTarget.length > 0 && toolsTarget[0].classList.contains(BlueprintClasses.POPOVER_OPEN)) {
-                    switchToolsTimerOff = setTimeout(() => toolsTarget[0].click(), 500);
+                    switchToolsTimerOff = setTimeout(() => (toolsTarget[0] as HTMLElement).click(), 500);
                 }
                 setExtendedTooltipDisplayed(false);
             },
-        };
+        }), [intent, category, tooltip, handleProps.isConnectable, handleProps.style]);
 
         switch (flowVersionCheck) {
-            case "legacy":
-                return (
-                    <HandleLegacy ref={handleDefaultRef} {...(handleConfig as HandleProps)}>
-                        {handleContent}
-                    </HandleLegacy>
-                );
-            case "next":
+            case "v9":
                 return (
-                    <HandleNext ref={handleDefaultRef} {...(handleConfig as HandleNextProps)}>
+                    <HandleV9 ref={handleDefaultRef} {...(handleConfig as HandleV9Props)}>
                         {handleContent}
-                    </HandleNext>
+                    </HandleV9>
                 );
             case "v12":
                 return (

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

@@ -90,7 +90,7 @@ div.react-flow__handle {
     }
 
     &[data-category="dependency"] {
-        background-color: color-mix(in srgb, currentcolor 39%, white);
+        background-color: eccgui-color-mix(currentcolor 39%, white);
         border-radius: 0;
         transform: rotate(45deg);
 
@@ -118,7 +118,7 @@ div.react-flow__handle {
     }
 
     &[data-category="unknown"] {
-        background-color: color-mix(in srgb, currentcolor 39%, white);
+        background-color: eccgui-color-mix(currentcolor 39%, white);
     }
 
     .react-flow__node:hover &.connectable {

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

@@ -8,16 +8,15 @@ import { Definitions } from "../../../../common/Intent";
 import {
     Button,
     HandleDefault,
-    HandleProps,
+    HandleDefaultProps,
     HandleTools,
     Menu,
     MenuItem,
-    ReactFlow,
+    ReactFlowExtended,
     SimpleDialog,
 } from "./../../../../../index";
-import { edgeTypes } from "./../../edges/edgeTypes";
 
-const HandleDefaultDataProps = (data: HandleProps["data"]) => {
+const HandleDefaultDataProps = (data: HandleDefaultProps["data"]) => {
     // this is only a mock to get it as sub element in the table
     return <>{data?.extendedTooltip}</>;
 };
@@ -66,11 +65,10 @@ const HandleDefaultExample = (args: any) => {
     return (
         <OverlaysProvider>
             <ReactFlowProvider>
-                <ReactFlow
+                <ReactFlowExtended
                     elements={elements}
                     style={{ height: "400px" }}
                     onLoad={onLoad}
-                    edgeTypes={edgeTypes}
                     defaultZoom={1}
                 />
             </ReactFlowProvider>

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

@@ -6,17 +6,19 @@ export * from "./nodes/nodeUtils";
 export * from "./handles/HandleDefault";
 export * from "./handles/HandleContent";
 export * from "./handles/HandleTools";
+export * from "./edges/EdgeBezier";
 export * from "./edges/EdgeDefault";
+export * from "./edges/EdgeDefaultV12";
+export * from "./edges/EdgeDefs";
 export * from "./edges/EdgeStep";
+export * from "./edges/EdgeStraight";
+export * from "./edges/EdgeNew";
 export * from "./edges/EdgeTools";
 export * from "./edges/EdgeLabel";
 export * from "./edges/EdgeDefs";
 export * from "./edges/EdgeDefaultV12";
 export * from "./markers/ReactFlowMarkers";
 export * from "./minimap/MiniMap";
+export * from "./minimap/MiniMapV12";
 export * from "./minimap/utils";
-export * from "./versionsupport";
-
-// deprecated exports
-export { nodeTypes } from "./nodes/nodeTypes"; // @deprecated removed in v25
-export { edgeTypes } from "./edges/edgeTypes"; // @deprecated removed in v25
+export * from "./versionsupport";

package/src/extensions/react-flow/markers/MarkerArrowClosedInverse.tsx

@@ -1,5 +1,8 @@
 import React, { FC } from "react";
 
+/**
+ * @deprecated (v26) only necessary for react flow v9, support will be removed
+ */
 export const MarkerArrowClosedInverse: FC = () => {
     return (
         <marker

package/src/extensions/react-flow/markers/ReactFlowMarkers.tsx

@@ -1,16 +1,73 @@
 import React, { FC } from "react";
 
+import { intentClassName, IntentTypes } from "../../../common/Intent";
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+
 // FIXME: we need to check how these markers are used and if we can justify the namings
 import { MarkerArrowClosedInverse } from "./MarkerArrowClosedInverse";
 
+type ReactFlowMarkerAppearance = "arrow-closed";
+
+interface ReactFlowMarkerProps extends React.SVGProps<SVGMarkerElement> {
+    /**
+     * Visual appearance of the marker.
+     */
+    appearance?: ReactFlowMarkerAppearance;
+    /**
+     * Feedback state of the marker.
+     * SVG markers are reused by paths but they cannot inherit their state color automatically.
+     */
+    intent?: IntentTypes;
+    /**
+     * If set, then the marker orientation is reversed.
+     * Can be used if a start marker should displayed similar to an end marker.
+     */
+    reverse?: boolean;
+}
+
+const ReactFlowMarker = ({ className, appearance = "arrow-closed", intent, reverse }: ReactFlowMarkerProps) => {
+    const markerDisplay: Record<ReactFlowMarkerAppearance, unknown> = {
+        "arrow-closed": (
+            <path d="M-5,-4 L5,0 L-5,4 Z" fill="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+        ),
+    };
+
+    return (
+        <marker
+            id={`react-flow__marker--${appearance}${intent ? `-${intent}` : ""}${reverse ? "-reverse" : ""}`}
+            className={
+                `${eccgui}-graphviz__marker` +
+                (className ? ` ${className}` : "") +
+                (intent ? ` ${intentClassName(intent)}` : "")
+            }
+            markerWidth="12.5"
+            markerHeight="12.5"
+            viewBox="-10 -10 20 20"
+            refX="0"
+            refY="0"
+            orient={reverse ? "auto-start-reverse" : "auto"}
+        >
+            {markerDisplay[appearance]}
+        </marker>
+    );
+};
+
 const ReactFlowMarkers: FC = () => {
+    const intents = ["none", "primary", "accent", "success", "warning", "danger", "info" ] as IntentTypes[];
+
     return (
         <svg>
             <defs>
                 <MarkerArrowClosedInverse />
+                {intents.map((intent) => (
+                    <>
+                        <ReactFlowMarker appearance="arrow-closed" intent={intent} />
+                        <ReactFlowMarker appearance="arrow-closed" intent={intent} reverse />
+                    </>
+                ))}
             </defs>
         </svg>
     );
 };
 
-export { MarkerArrowClosedInverse, ReactFlowMarkers };
+export { MarkerArrowClosedInverse, ReactFlowMarkers, ReactFlowMarker };

package/src/extensions/react-flow/markers/_markers.scss

@@ -0,0 +1,31 @@
+marker[id|="react-flow__marker"] {
+    color: var(--marker-intent-color);
+
+    &.#{$eccgui}-intent--none {
+        --marker-intent-color: #{$reactflow-edge-stroke-color-default};
+    }
+
+    &.#{$eccgui}-intent--primary {
+        --marker-intent-color: #{$eccgui-color-primary};
+    }
+
+    &.#{$eccgui}-intent--accent {
+        --marker-intent-color: #{$eccgui-color-accent};
+    }
+
+    &.#{$eccgui}-intent--info {
+        --marker-intent-color: #{$eccgui-color-info-text};
+    }
+
+    &.#{$eccgui}-intent--success {
+        --marker-intent-color: #{$eccgui-color-success-text};
+    }
+
+    &.#{$eccgui}-intent--warning {
+        --marker-intent-color: #{$eccgui-color-warning-text};
+    }
+
+    &.#{$eccgui}-intent--danger {
+        --marker-intent-color: #{$eccgui-color-danger-text};
+    }
+}

package/src/extensions/react-flow/minimap/MiniMap.stories.tsx

@@ -1,32 +1,26 @@
 import React, { FC, useCallback, useEffect, useState } from "react";
-import { Background, BackgroundVariant, Elements, FlowElement } from "react-flow-renderer";
-import { OverlaysProvider } from "@blueprintjs/core";
+import { Background, BackgroundVariant, Elements } from "react-flow-renderer";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { Default as ReactFlowExample } from "../../../cmem/react-flow/ReactFlow/ReactFlow.stories";
 
-import { MiniMap as MiniMapElement, MiniMapProps, ReactFlow, ReactFlowProps } from "./../../../../index";
+import { ApplicationContainer, MiniMap, MiniMapProps, ReactFlowExtended } from "./../../../index";
 
 export default {
     title: "Extensions/React Flow/MiniMap",
-    component: MiniMapElement,
+    component: MiniMap,
     argTypes: {},
-} as Meta<typeof MiniMapElement>;
+} as Meta<typeof MiniMap>;
 
 const MiniMapExample: FC<MiniMapProps> = (args) => {
     const [reactflowInstance, setReactflowInstance] = useState(undefined);
     const [elements, setElements] = useState([] as Elements);
-    const [edgeTools, setEdgeTools] = useState<JSX.Element>(<></>);
     const nodeExamples = ReactFlowExample.nodeExamples.workflow;
 
     useEffect(() => {
-        setElements(nodeExamples as Elements);
+        setElements([...nodeExamples.nodes, ...nodeExamples.edges] as Elements);
     }, [args]);
 
-    // Helper methods for nodes and edges
-    const isNode = (element: FlowElement & { source?: string }): boolean => !element.source;
-    const isEdge = (element: FlowElement & { source?: string }): boolean => !isNode(element);
-
     const onLoad = useCallback((rfi) => {
         if (!reactflowInstance) {
             setReactflowInstance(rfi);
@@ -34,23 +28,23 @@ const MiniMapExample: FC<MiniMapProps> = (args) => {
     }, []);
 
     return (
-        <OverlaysProvider>
-            <ReactFlow
+        <ApplicationContainer style={{ background: "white" }}>
+            <ReactFlowExtended
                 configuration={"workflow"}
                 elements={elements}
                 style={{ height: "400px" }}
                 onLoad={onLoad}
                 defaultZoom={1}
             >
-                <MiniMapElement flowInstance={reactflowInstance} {...args} />
+                <MiniMap flowInstance={reactflowInstance} {...args} />
                 <Background variant={BackgroundVariant.Lines} gap={16} />
-            </ReactFlow>
-            {edgeTools}
-        </OverlaysProvider>
+            </ReactFlowExtended>
+        </ApplicationContainer>
     );
 };
 
-const Template: StoryFn<typeof MiniMapExample> = (args) => <MiniMapExample {...args} />;
+let forcedUpdateKey = 0; // @see https://github.com/storybookjs/storybook/issues/13375#issuecomment-1291011856
+const Template: StoryFn<MiniMapProps> = (args) => <MiniMapExample {...args} key={++forcedUpdateKey} />;
 
 export const Default = Template.bind({});
 Default.args = {

package/src/extensions/react-flow/minimap/MiniMap.tsx

@@ -1,14 +1,16 @@
 import React, { memo, useEffect } from "react";
-import { MiniMap as ReactFlowMiniMap, MiniMapProps as ReactFlowMiniMapProps, OnLoadParams } from "react-flow-renderer";
+import {
+    MiniMap as ReactFlowMiniMapV9,
+    MiniMapProps as ReactFlowMiniMapV9Props,
+    OnLoadParams
+} from "react-flow-renderer";
 import { FlowTransform } from "react-flow-renderer/dist/types";
 
-import { miniMapUtils } from "../minimap/utils";
+import { miniMapUtils } from "./utils";
+import { ReacFlowVersionSupportProps, ReactFlowVersions, useReactFlowVersion } from "../versionsupport";
+import { MiniMapV12, MiniMapV12Props } from "./MiniMapV12";
 
-export interface MiniMapProps extends ReactFlowMiniMapProps {
-    /**
-     * React-Flow instance
-     */
-    flowInstance?: OnLoadParams;
+export interface MiniMapBasicProps {
     /**
      * Enable navigating the react-flow canvas by dragging and clicking on the mini-map.
      */
@@ -23,6 +25,15 @@ export interface MiniMapProps extends ReactFlowMiniMapProps {
     >;
 }
 
+export interface MiniMapV9Props extends MiniMapBasicProps, ReactFlowMiniMapV9Props {
+    /**
+     * React-Flow instance
+     */
+    flowInstance?: OnLoadParams;
+}
+
+export type MiniMapProps = (ReacFlowVersionSupportProps & MiniMapV9Props) | (ReacFlowVersionSupportProps & MiniMapV12Props);
+
 interface configParams {
     // Key has been pressed down over the mini-map and navigation mode has thus started
     navigationOn: boolean;
@@ -40,6 +51,28 @@ let minimapCalcConf: configParams = {
 
 /** An improved mini-map for react-flow that supports navigation via the mini-map. */
 export const MiniMap = memo(
+    ({
+        flowVersion,
+        ...otherProps
+    }: MiniMapProps) => {
+        const flowVersionCheck = flowVersion || useReactFlowVersion();
+        
+        switch (flowVersionCheck) {
+            case ReactFlowVersions.V9:
+                return <MiniMapV9 {...otherProps as MiniMapV9Props} />;
+            case ReactFlowVersions.V12:
+                return <MiniMapV12 {...otherProps as MiniMapV12Props} />;
+            default:
+                return <></>; // cannot exit on its own
+        }
+    }
+);
+
+/**
+ * Mini-map support for for React Flow v9.
+ * @deprecated (v26) will be removed, use when `MiniMap` directly
+ */
+export const MiniMapV9 = memo(
     ({
         flowInstance,
         enableNavigation = false,
@@ -49,7 +82,7 @@ export const MiniMap = memo(
         nodeStrokeColor = miniMapUtils.borderColor,
         wrapperProps,
         ...minimapProps
-    }: MiniMapProps) => {
+    }: MiniMapV9Props) => {
         const minimapWrapper = React.useRef<HTMLDivElement | null>(null);
 
         useEffect(() => {
@@ -130,7 +163,7 @@ export const MiniMap = memo(
                         : wrapperProps?.style
                 }
             >
-                <ReactFlowMiniMap
+                <ReactFlowMiniMapV9
                     maskColor={maskColor}
                     nodeClassName={nodeClassName}
                     nodeColor={nodeColor}
@@ -141,3 +174,5 @@ export const MiniMap = memo(
         );
     }
 );
+
+export default MiniMap;

package/src/extensions/react-flow/minimap/MiniMapV12.tsx

@@ -0,0 +1,39 @@
+import React, { memo } from "react";
+import { MiniMap as ReactFlowMiniMap, MiniMapProps as ReactFlowMiniMapProps } from "@xyflow/react";
+
+import { miniMapUtils } from "./utils";
+import { MiniMapBasicProps } from "./MiniMap";
+
+export interface MiniMapV12Props extends MiniMapBasicProps, Omit<ReactFlowMiniMapProps, "maskColor"> {
+}
+
+/**
+ * Mini-map support for for React Flow v12.
+ * @deprecated (v26) will be removed when `MiniMap` supports v12 directly
+ */
+export const MiniMapV12 = memo(
+    ({
+        enableNavigation = false,
+        nodeClassName = miniMapUtils.nodeClassName,
+        nodeColor = miniMapUtils.nodeColor,
+        nodeStrokeColor = miniMapUtils.borderColor,
+        wrapperProps,
+        ...minimapProps
+    }: MiniMapV12Props) => {
+        return (
+            <div
+                {...wrapperProps}
+                style={enableNavigation ? { ...(wrapperProps?.style ?? {}), cursor: "grab" } : wrapperProps?.style}
+            >
+                <ReactFlowMiniMap
+                    nodeClassName={nodeClassName}
+                    nodeColor={nodeColor}
+                    nodeStrokeColor={nodeStrokeColor}
+                    {...minimapProps}
+                    zoomable={enableNavigation}
+                    pannable={enableNavigation}
+                />
+            </div>
+        );
+    }
+);

package/src/extensions/react-flow/minimap/_minimap.scss

@@ -1,3 +1,17 @@
+.react-flow__minimap {
+    right: $eccgui-size-block-whitespace * 0.5 !important;
+    bottom: $eccgui-size-block-whitespace !important;
+    border: solid 1px $eccgui-color-separation-divider;
+
+    & > svg {
+        display: block;
+    }
+}
+
+.react-flow__minimap-mask {
+    fill: rgba($eccgui-color-separation-divider, $eccgui-opacity-muted);
+}
+
 .#{$eccgui}-graphviz__minimap__node--default {
     &:not([fill]) {
         fill: $reactflow-node-background-color;