@eccenca/gui-elements 24.2.0 → 24.4.0

package/src/extensions/react-flow/edges/stories/EdgeDefaultV12.stories.tsx

@@ -0,0 +1,183 @@
+import React, { useCallback, useState } from "react";
+import { Meta, StoryFn } from "@storybook/react";
+import { addEdge, Edge, OnConnect, Position, ReactFlow, useEdgesState, useNodesState } from "@xyflow/react";
+
+import { NodeDefaultV12 } from "../../nodes/NodeDefaultV12";
+import { EdgeDefaultV12, EdgeDefaultV12DataProps as EdgeData } from "../EdgeDefaultV12";
+import { EdgeDefs } from "../EdgeDefs";
+
+import { EdgeLabel, EdgeLabelObject } from "./../../../../../index";
+
+/**
+ * this is only a mock to get it as sub element in the table
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const EdgeDefaultDataProps = (data: EdgeData) => {
+    return <></>;
+};
+
+const edgeTypes = {
+    default: EdgeDefaultV12,
+};
+const nodeTypes = {
+    default: NodeDefaultV12,
+};
+export default {
+    title: "Extensions/React Flow V12/Edge",
+    component: EdgeDefaultV12,
+    subcomponents: { EdgeDefaultDataProps },
+} as Meta<typeof EdgeDefaultV12>;
+
+const EdgeDefault = (args: Edge) => {
+    const [reactflowInstance, setReactflowInstance] = useState(null);
+
+    const [nodes, , onNodesChange] = useNodesState([
+        {
+            id: args.source,
+            type: "default",
+            data: {
+                label: "Default source",
+                content: "Example content.",
+                minimalShape: "none",
+                handles: [
+                    {
+                        id: args.source,
+                        type: "source",
+                        tooltip: "this is a source handle",
+                        position: Position.Right,
+                        onClick: (params) => {
+                            // eslint-disable-next-line no-console
+                            console.log("onClick source", params);
+                        },
+                    },
+                ],
+            },
+            position: { x: 50, y: 200 },
+        },
+        {
+            id: args.target,
+            type: "default",
+            data: {
+                label: "Default target",
+                content: "Example content.",
+                minimalShape: "none",
+                handles: [
+                    {
+                        id: args.target,
+                        type: "target",
+                        tooltip: "this is a target handle",
+                        position: Position.Left,
+                        onClick: (params) => {
+                            // eslint-disable-next-line no-console
+                            console.log("onClick target", params);
+                        },
+                    },
+                ],
+            },
+            position: { x: 600, y: 200 },
+        },
+    ]);
+
+    const [edges, setEdges, onEdgesChange] = useEdgesState([
+        {
+            ...args,
+            // sourceX: 150,
+            // sourceY: 0,
+            // targetX: 250,
+            // targetY: 0,
+            sourcePosition: Position.Left,
+            targetPosition: Position.Right,
+        },
+    ]);
+
+    const onConnect: OnConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), []);
+
+    const onLoad = useCallback(
+        (rfi) => {
+            if (!reactflowInstance) {
+                setReactflowInstance(rfi);
+            }
+        },
+        [reactflowInstance]
+    );
+
+    return (
+        <div style={{ width: "1000px", height: "800px" }}>
+            <EdgeDefs />
+            <ReactFlow
+                nodes={nodes}
+                edges={edges}
+                onLoad={onLoad}
+                edgeTypes={edgeTypes}
+                nodeTypes={nodeTypes}
+                onNodesChange={onNodesChange}
+                onEdgesChange={onEdgesChange}
+                onConnect={onConnect}
+            />
+        </div>
+    );
+};
+
+const Template: StoryFn<typeof EdgeDefault> = (args) => <EdgeDefault {...args} />;
+
+const defaultEdge: Edge = {
+    id: "default",
+    label: "edge",
+    source: "node-1",
+    target: "node-2",
+    data: {
+        edgeSvgProps: {
+            className: "storybook__test__classname",
+        },
+    },
+};
+
+export const Default = Template.bind({});
+Default.args = defaultEdge;
+
+export const CustomLabel = Template.bind({});
+CustomLabel.args = {
+    ...Default.args,
+    id: "customlabel",
+    label: undefined,
+    data: {
+        renderLabel: (edgeCenter: [number, number, number, number]) => (
+            <EdgeLabelObject edgeCenter={edgeCenter}>
+                <EdgeLabel text="Custom label that is very long" />
+            </EdgeLabelObject>
+        ),
+    },
+};
+
+export const InverseEdge = Template.bind({});
+InverseEdge.args = {
+    ...Default.args,
+    id: "inverse",
+    data: {
+        inversePath: true,
+    },
+};
+
+export const AdjustStrokeType = Template.bind({});
+AdjustStrokeType.args = {
+    ...Default.args,
+    data: {
+        strokeType: "double",
+    },
+};
+
+export const AdjustIntent = Template.bind({});
+AdjustIntent.args = {
+    ...Default.args,
+    data: {
+        intent: "warning",
+    },
+};
+
+export const AdjustHighlight = Template.bind({});
+AdjustHighlight.args = {
+    ...Default.args,
+    data: {
+        highlightColor: ["default", "alternate"],
+    },
+};

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

@@ -1,6 +1,7 @@
 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 HandleV12, HandleProps as ReactFlowHandleV12Props } from "@xyflow/react";
 import { Classes as BlueprintClasses } from "@blueprintjs/core";
 
 import { intentClassName, IntentTypes } from "../../../common/Intent";
@@ -36,8 +37,8 @@ interface HandleExtensionProps
 
 export interface HandleProps extends HandleExtensionProps, ReactFlowHandleLegacyProps {}
 export interface HandleNextProps extends HandleExtensionProps, ReactFlowHandleNextProps {}
-
-export type HandleDefaultProps = HandleProps | HandleNextProps;
+export interface HandleV12Props extends HandleExtensionProps, ReactFlowHandleV12Props {}
+export type HandleDefaultProps = HandleProps | HandleNextProps | HandleV12Props;
 
 export const HandleDefault = memo(
     ({ flowVersion, data, tooltip, children, category, intent, ...handleProps }: HandleDefaultProps) => {
@@ -126,16 +127,23 @@ export const HandleDefault = memo(
         switch (flowVersionCheck) {
             case "legacy":
                 return (
-                    <HandleLegacy ref={handleDefaultRef} {...handleConfig}>
+                    <HandleLegacy ref={handleDefaultRef} {...(handleConfig as HandleProps)}>
                         {handleContent}
                     </HandleLegacy>
                 );
             case "next":
                 return (
-                    <HandleNext ref={handleDefaultRef} {...handleConfig}>
+                    <HandleNext ref={handleDefaultRef} {...(handleConfig as HandleNextProps)}>
                         {handleContent}
                     </HandleNext>
                 );
+            case "v12":
+                return (
+                    <HandleV12 ref={handleDefaultRef} {...(handleConfig as HandleV12Props)}>
+                        {handleContent}
+                    </HandleV12>
+                );
+
             default:
                 return <></>;
         }

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

@@ -10,9 +10,12 @@ export * from "./edges/EdgeDefault";
 export * from "./edges/EdgeStep";
 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/utils";
+export * from "./versionsupport";
 
 // deprecated exports
 export { nodeTypes } from "./nodes/nodeTypes"; // @deprecated removed in v25

package/src/extensions/react-flow/nodes/NodeContent.tsx

@@ -1,17 +1,18 @@
 import React from "react";
 import { Position, useStoreState as getStoreStateFlowLegacy } from "react-flow-renderer";
 import { useStore as getStoreStateFlowNext } from "react-flow-renderer-lts";
+import { useStore as useStoreFlowV12 } from "@xyflow/react";
 import Color from "color";
 import { Resizable } from "re-resizable";
 
 import { intentClassName, IntentTypes } from "../../../common/Intent";
-import { DepictionProps } from "../../../components/Depiction/Depiction";
+import { DepictionProps } from "../../../components";
 import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
-import { Depiction, Icon, OverflowText } from "../../../index";
+import { Depiction, HandleDefaultProps, Icon, OverflowText } from "../../../index";
+import { HandleDefault, HandleNextProps, HandleProps, HandleV12Props } from "../handles/HandleDefault";
 import { ReacFlowVersionSupportProps, useReactFlowVersion } from "../versionsupport";
 
-import { HandleDefault, HandleNextProps, HandleProps } from "./../handles/HandleDefault";
 import { NodeContentExtensionProps } from "./NodeContentExtension";
 import { NodeDefaultProps } from "./NodeDefault";
 import { NodeHighlightColor } from "./sharedTypes";
@@ -20,7 +21,12 @@ type NodeContentHandleLegacyProps = HandleProps;
 
 type NodeContentHandleNextProps = HandleNextProps;
 
-export type NodeContentHandleProps = NodeContentHandleLegacyProps | NodeContentHandleNextProps;
+type NodeContentHandleV12Props = HandleV12Props;
+
+export type NodeContentHandleProps =
+    | NodeContentHandleLegacyProps
+    | NodeContentHandleNextProps
+    | NodeContentHandleV12Props;
 
 export type NodeDimensions = {
     width?: number;
@@ -150,7 +156,7 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any>
      * Array of property definition objects for `Handle` components that need to be created for the node.
      * @see https://reactflow.dev/docs/api/handle/
      */
-    handles?: NodeContentHandleLegacyProps[] | NodeContentHandleNextProps[];
+    handles?: NodeContentHandleProps[];
     /**
      * Set the minimal number of handles on left or right side of the node to activate the recalculation of the minimal height of the node.
      */
@@ -223,26 +229,33 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any>
 
 interface MemoHandlerLegacyProps extends HandleProps {
     posdirection: string;
-    style: {
-        [key: string]: string | undefined;
-    };
+    style: React.CSSProperties;
+    flowVersion: "legacy";
 }
 
 interface MemoHandlerNextProps extends HandleNextProps {
     posdirection: string;
-    style: {
-        [key: string]: string | undefined;
-    };
+    style: React.CSSProperties;
+    flowVersion: "next";
+}
+
+interface MemoHandlerV12Props extends HandleV12Props {
+    posdirection: string;
+    style: React.CSSProperties;
+    flowVersion: "v12";
 }
 
-type MemoHandlerProps = MemoHandlerLegacyProps | MemoHandlerNextProps;
+type MemoHandlerProps = MemoHandlerLegacyProps | MemoHandlerNextProps | MemoHandlerV12Props;
 
-const defaultHandles = (flowVersion: ReacFlowVersionSupportProps["flowVersion"]) => {
+const defaultHandles = (flowVersion: ReacFlowVersionSupportProps["flowVersion"]): NodeContentHandleProps[] => {
     switch (flowVersion) {
         case "legacy":
             return [{ type: "target" }, { type: "source" }] as NodeContentHandleLegacyProps[];
         case "next":
             return [{ type: "target" }, { type: "source" }] as NodeContentHandleNextProps[];
+        case "v12":
+            return [{ type: "target" }, { type: "source" }] as NodeContentHandleV12Props[];
+
         default:
             return [];
     }
@@ -265,7 +278,8 @@ const addHandles = (
     nodeStyle: any,
     flowVersion: any = "legacy"
 ) => {
-    return handles[position].map((handle: any, idx: any) => {
+    return handles[position].map((handle: HandleDefaultProps, idx: number) => {
+        // FIXME: remove? orig v12 change: return handles[position].map((handle: any, idx: any) => {
         const { style = {}, ...otherHandleProps } = handle;
         const styleAdditions: { [key: string]: string } = {
             color: nodeStyle.borderColor ?? undefined,
@@ -280,17 +294,22 @@ const addHandles = (
                 isConnectable: typeof handle.isConnectable !== "undefined" ? handle.isConnectable : isConnectable,
             },
         };
+
         return <MemoHandler flowVersion={flowVersion} {...handleProperties} key={"handle" + idx} />;
     });
 };
 
+function compareStyleDirection(styleA: React.CSSProperties, styleB: React.CSSProperties, direction: string) {
+    return styleA[direction as keyof React.CSSProperties] === styleB[direction as keyof React.CSSProperties];
+}
+
 const MemoHandler = React.memo(
     (props: MemoHandlerProps) => <HandleDefault {...props} />,
     (prev, next) => {
         return (
             // we only test a few properties to control re-rendering
             // need to be extended if also other properties need to be changed late
-            prev.style[prev.posdirection] === next.style[next.posdirection] &&
+            compareStyleDirection(prev.style, next.style, prev.posdirection) &&
             prev.isConnectable === next.isConnectable &&
             prev.intent === next.intent &&
             prev.category === next.category
@@ -360,15 +379,24 @@ export function NodeContent<CONTENT_PROPS = any>({
     const [width, setWidth] = React.useState<number | undefined>(nodeDimensions?.width ?? undefined);
     const [height, setHeight] = React.useState<number | undefined>(nodeDimensions?.height ?? undefined);
     // Keeps the initial size of the element
-    const originalSize = React.useRef<NodeDimensions>({})
+    const originalSize = React.useRef<NodeDimensions>({});
 
     let zoom = 1;
     if (isResizable)
         try {
-            [, , zoom] =
-                flowVersionCheck === "legacy"
-                    ? getStoreStateFlowLegacy((state) => state.transform)
-                    : getStoreStateFlowNext((state) => state.transform);
+            switch (flowVersionCheck) {
+                case "legacy":
+                    [, , zoom] = getStoreStateFlowLegacy((state) => state.transform);
+                    break;
+                case "next":
+                    [, , zoom] = getStoreStateFlowNext((state) => state.transform);
+                    break;
+                case "v12":
+                    // we are calling a hook here conditionally. Not recommended, by the flowversion check is
+                    // is basically compile time determined. So we just do it.
+                    [, , zoom] = useStoreFlowV12((state) => state.transform);
+                    break;
+            }
         } catch (error) {
             // do not handle error but at least push it to the console
             // eslint-disable-next-line no-console
@@ -376,18 +404,13 @@ export function NodeContent<CONTENT_PROPS = any>({
         }
     const [adjustedContentProps, setAdjustedContentProps] = React.useState<Partial<CONTENT_PROPS>>({});
     const nodeContentRef = React.useRef<any>();
-    const handleStack =
-        flowVersionCheck === "legacy"
-            ? ({} as { [key: string]: NodeContentHandleLegacyProps[] })
-            : ({} as { [key: string]: NodeContentHandleNextProps[] });
-    handleStack[Position.Top] =
-        flowVersionCheck === "legacy" ? ([] as NodeContentHandleLegacyProps[]) : ([] as NodeContentHandleNextProps[]);
-    handleStack[Position.Right] =
-        flowVersionCheck === "legacy" ? ([] as NodeContentHandleLegacyProps[]) : ([] as NodeContentHandleNextProps[]);
-    handleStack[Position.Bottom] =
-        flowVersionCheck === "legacy" ? ([] as NodeContentHandleLegacyProps[]) : ([] as NodeContentHandleNextProps[]);
-    handleStack[Position.Left] =
-        flowVersionCheck === "legacy" ? ([] as NodeContentHandleLegacyProps[]) : ([] as NodeContentHandleNextProps[]);
+
+    const handleStack: Record<string, HandleDefaultProps[]> = {
+        [Position.Top]: [],
+        [Position.Right]: [],
+        [Position.Bottom]: [],
+        [Position.Left]: [],
+    };
 
     const saveOriginalSize = () => {
         const currentClassNames = nodeContentRef.current.classList;
@@ -396,13 +419,16 @@ export function NodeContent<CONTENT_PROPS = any>({
         }
         originalSize.current.width = nodeContentRef.current.offsetWidth as number;
         originalSize.current.height = nodeContentRef.current.offsetHeight as number;
-    }
+    };
 
     React.useEffect(() => {
-        if(nodeContentRef.current && (!(originalSize.current.width || originalSize.current.height) || !(width || height))) {
+        if (
+            nodeContentRef.current &&
+            (!(originalSize.current.width || originalSize.current.height) || !(width || height))
+        ) {
             saveOriginalSize();
         }
-    }, [!!nodeContentRef.current, !(originalSize.current.width || originalSize.current.height), !(width || height)])
+    }, [!!nodeContentRef.current, !(originalSize.current.width || originalSize.current.height), !(width || height)]);
 
     // Update width and height when node dimensions parameters has changed
     React.useEffect(() => {
@@ -414,9 +440,11 @@ export function NodeContent<CONTENT_PROPS = any>({
 
     const isResizingActive = React.useCallback((): boolean => {
         const currentClassNames = nodeContentRef.current.classList;
-        return resizeDirections.right === currentClassNames.contains("is-resizable-horizontal") ||
-            resizeDirections.bottom === currentClassNames.contains("is-resizable-vertical");
-    }, [])
+        return (
+            resizeDirections.right === currentClassNames.contains("is-resizable-horizontal") ||
+            resizeDirections.bottom === currentClassNames.contains("is-resizable-vertical")
+        );
+    }, []);
 
     // force default size when resizing is activated but no dimensions are set
     React.useEffect(() => {
@@ -424,13 +452,21 @@ export function NodeContent<CONTENT_PROPS = any>({
 
         if (isResizable && !resizingActive) {
             if (!width || !height) {
-                const newWidth = validateWidth(width ?? originalSize.current?.width as number);
-                const newHeight = validateHeight(height ?? originalSize.current?.height as number);
+                const newWidth = validateWidth(width ?? (originalSize.current?.width as number));
+                const newHeight = validateHeight(height ?? (originalSize.current?.height as number));
                 setWidth(newWidth);
                 setHeight(newHeight);
             }
         }
-    }, [nodeContentRef.current, onNodeResize, minimalShape, resizeDirections?.bottom, resizeDirections?.right, width, height]); // need to be done everytime a property is changed and the element is re-rendered, otherwise the resizing class is lost
+    }, [
+        nodeContentRef.current,
+        onNodeResize,
+        minimalShape,
+        resizeDirections?.bottom,
+        resizeDirections?.right,
+        width,
+        height,
+    ]); // need to be done everytime a property is changed and the element is re-rendered, otherwise the resizing class is lost
 
     // conditional enhancements for activated resizing
     React.useEffect(() => {
@@ -444,7 +480,7 @@ export function NodeContent<CONTENT_PROPS = any>({
             if (currentClassNames.contains("is-resizable-vertical")) {
                 currentClassNames.remove("is-resizable-vertical");
             }
-            
+
             if (resizeDirections.right) {
                 currentClassNames.add("is-resizable-horizontal");
             }
@@ -487,15 +523,16 @@ export function NodeContent<CONTENT_PROPS = any>({
                 return 0;
             })
             .forEach((handle) => {
-                if (handle.position) {
-                    handleStack[handle.position].push(handle);
-                } else if (handle.category === "configuration") {
+                if ("category" in handle && handle.category === "configuration") {
                     handleStack[Position.Top].push(handle);
+                } else if (handle.position) {
+                    handleStack[handle.position].push(handle);
                 } else {
-                    if (handle.type === "target") {
+                    const handleType = handle as { type?: string };
+                    if (handleType.type === "target") {
                         handleStack[targetPosition].push(handle);
                     }
-                    if (handle.type === "source") {
+                    if (handleType.type === "source") {
                         handleStack[sourcePosition].push(handle);
                     }
                 }
@@ -631,7 +668,7 @@ export function NodeContent<CONTENT_PROPS = any>({
                         )}
                     </div>
                     {(menuButtons || (showExecutionButtons && executionButtons)) && (
-                        <div className={`${eccgui}-graphviz__node__header-menu`}>
+                        <div className={`${eccgui}-graphviz__node__header-menu nodrag`}>
                             {showExecutionButtons && typeof executionButtons === "function"
                                 ? executionButtons(adjustedContentProps, setAdjustedContentProps)
                                 : null}

package/src/extensions/react-flow/nodes/NodeDefaultV12.tsx

@@ -0,0 +1,53 @@
+import React, { memo } from "react";
+import { NodeProps as ReactFlowNodeProps, Position } from "react-flow-renderer";
+
+import { Tooltip } from "../../../index";
+
+import { NodeContent, NodeContentProps } from "./NodeContent";
+
+export interface NodeDefaultProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends ReactFlowNodeProps {
+    /**
+     * Contains all properties for our implementation of the React-Flow node.
+     * For details pls see the `NodeContent` element documentation.
+     */
+    data: NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS>;
+}
+
+/**
+ * This element cannot be used directly, it must be connected via a `nodeTypes` definition.
+ * @see https://reactflow.dev/docs/api/nodes/
+ * @deprecated (v26) will be removed when `NodeDefault` supports v12 directly
+ */
+export const NodeDefaultV12 = memo((node: NodeDefaultProps<any>) => {
+    const {
+        data,
+        targetPosition = Position.Left,
+        sourcePosition = Position.Right,
+        isConnectable = true,
+        selected,
+    } = node;
+
+    const nodeEl = (
+        <NodeContent {...{ flowVersion: "v12", ...data, targetPosition, sourcePosition, isConnectable, selected }} />
+    );
+
+    if (!selected && data?.minimalShape !== "none" && !!data?.getMinimalTooltipData) {
+        const tooltipData = data?.getMinimalTooltipData(node);
+        if (!!tooltipData.label || !!tooltipData.content) {
+            return (
+                <Tooltip
+                    content={
+                        <>
+                            {tooltipData.label && <div>{tooltipData.label}</div>}
+                            {tooltipData.content && <div>{tooltipData.content}</div>}
+                        </>
+                    }
+                >
+                    {nodeEl}
+                </Tooltip>
+            );
+        }
+    }
+
+    return nodeEl;
+});