@eccenca/gui-elements 23.4.2-rc.0 → 23.6.0-rc.0

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

@@ -1,10 +1,7 @@
-import React, { useEffect, memo } from "react";
-import {
-    MiniMap as ReactFlowMiniMap,
-    MiniMapProps as ReactFlowMiniMapProps,
-    OnLoadParams,
-} from "react-flow-renderer";
-import {FlowTransform} from "react-flow-renderer/dist/types";
+import React, { memo, useEffect } from "react";
+import { MiniMap as ReactFlowMiniMap, MiniMapProps as ReactFlowMiniMapProps, OnLoadParams } from "react-flow-renderer";
+import { FlowTransform } from "react-flow-renderer/dist/types";
+
 import { miniMapUtils } from "../minimap/utils";
 
 export interface MiniMapProps extends ReactFlowMiniMapProps {
@@ -21,100 +18,110 @@ interface configParams {
     flowElement: Element | null;
 }
 
-let minimapCalcConf: configParams  = {
+let minimapCalcConf: configParams = {
     navigationOn: false,
     minimapElement: null,
-    flowElement: null
+    flowElement: null,
 };
 
 /** An improved mini-map for react-flow that supports navigation via the mini-map. */
-export const MiniMap = memo(({
-    flowInstance,
-    enableNavigation = false,
-    maskColor = "#ddddddbb",
-    nodeClassName = miniMapUtils.nodeClassName,
-    nodeColor = miniMapUtils.nodeColor,
-    nodeStrokeColor = miniMapUtils.borderColor,
-    ...minimapProps
-}: MiniMapProps) => {
-    const minimapWrapper = React.useRef<HTMLDivElement | null>(null);
+export const MiniMap = memo(
+    ({
+        flowInstance,
+        enableNavigation = false,
+        maskColor = "#ddddddbb",
+        nodeClassName = miniMapUtils.nodeClassName,
+        nodeColor = miniMapUtils.nodeColor,
+        nodeStrokeColor = miniMapUtils.borderColor,
+        ...minimapProps
+    }: MiniMapProps) => {
+        const minimapWrapper = React.useRef<HTMLDivElement | null>(null);
 
-    useEffect(() => {
-        const minimapDiv: HTMLDivElement | null = minimapWrapper.current
-        if (enableNavigation && flowInstance && minimapDiv) {
-            minimapCalcConf = {
-                navigationOn: false,
-                minimapElement: minimapDiv.querySelector(".react-flow__minimap"),
-                flowElement: minimapDiv.closest(".react-flow"),
+        useEffect(() => {
+            const minimapDiv: HTMLDivElement | null = minimapWrapper.current;
+            if (enableNavigation && flowInstance && minimapDiv) {
+                minimapCalcConf = {
+                    navigationOn: false,
+                    minimapElement: minimapDiv.querySelector(".react-flow__minimap"),
+                    flowElement: minimapDiv.closest(".react-flow"),
+                };
             }
-        }
-    }, [flowInstance, enableNavigation])
+        }, [flowInstance, enableNavigation]);
 
-    // sets the visible area of the canvas based on mouse movement on the mini-map
-    const handleMiniMapMouseMove = (event: any) => {
-        const minimapConfig = minimapCalcConf.minimapElement?.getAttribute("viewBox")?.split(" ");
-        if (minimapCalcConf.navigationOn && minimapCalcConf.minimapElement && minimapCalcConf.flowElement && flowInstance && minimapConfig) {
-            const minimapBounds = minimapCalcConf.minimapElement.getBoundingClientRect();
-            const canvasBounds = minimapCalcConf.flowElement.getBoundingClientRect();
-            const instanceState = flowInstance.toObject();
-            const minimapCoordinates = {
-                x0: parseInt(minimapConfig[0]),
-                y0: parseInt(minimapConfig[1]),
-                x1: parseInt(minimapConfig[2]) + parseInt(minimapConfig[0]),
-                y1: parseInt(minimapConfig[3]) + parseInt(minimapConfig[1]),
-            };
-            const minimapClick = {
-                x: event.clientX - minimapBounds.left,
-                y: event.clientY - minimapBounds.top,
-            };
-            const canvasPosition = {
-                x:
-                    ((minimapCoordinates.x1 - minimapCoordinates.x0) / minimapBounds.width) * minimapClick.x * -1 -
-                    minimapCoordinates.x0,
-                y:
-                    ((minimapCoordinates.y1 - minimapCoordinates.y0) / minimapBounds.height) * minimapClick.y * -1 -
-                    minimapCoordinates.y0,
-            };
-            const canvasNewState: FlowTransform = {
-                zoom: instanceState.zoom,
-                x: canvasPosition.x * instanceState.zoom + canvasBounds.width / 2,
-                y: canvasPosition.y * instanceState.zoom + canvasBounds.height / 2,
-            };
-            flowInstance.setTransform(canvasNewState);
-        }
-    };
+        // sets the visible area of the canvas based on mouse movement on the mini-map
+        const handleMiniMapMouseMove = (event: any) => {
+            const minimapConfig = minimapCalcConf.minimapElement?.getAttribute("viewBox")?.split(" ");
+            if (
+                minimapCalcConf.navigationOn &&
+                minimapCalcConf.minimapElement &&
+                minimapCalcConf.flowElement &&
+                flowInstance &&
+                minimapConfig
+            ) {
+                const minimapBounds = minimapCalcConf.minimapElement.getBoundingClientRect();
+                const canvasBounds = minimapCalcConf.flowElement.getBoundingClientRect();
+                const instanceState = flowInstance.toObject();
+                const minimapCoordinates = {
+                    x0: parseInt(minimapConfig[0]),
+                    y0: parseInt(minimapConfig[1]),
+                    x1: parseInt(minimapConfig[2]) + parseInt(minimapConfig[0]),
+                    y1: parseInt(minimapConfig[3]) + parseInt(minimapConfig[1]),
+                };
+                const minimapClick = {
+                    x: event.clientX - minimapBounds.left,
+                    y: event.clientY - minimapBounds.top,
+                };
+                const canvasPosition = {
+                    x:
+                        ((minimapCoordinates.x1 - minimapCoordinates.x0) / minimapBounds.width) * minimapClick.x * -1 -
+                        minimapCoordinates.x0,
+                    y:
+                        ((minimapCoordinates.y1 - minimapCoordinates.y0) / minimapBounds.height) * minimapClick.y * -1 -
+                        minimapCoordinates.y0,
+                };
+                const canvasNewState: FlowTransform = {
+                    zoom: instanceState.zoom,
+                    x: canvasPosition.x * instanceState.zoom + canvasBounds.width / 2,
+                    y: canvasPosition.y * instanceState.zoom + canvasBounds.height / 2,
+                };
+                flowInstance.setTransform(canvasNewState);
+            }
+        };
 
-    /**
+        /**
         sets the view for the user when clicked and finish navigation
      **/
-    const handleMiniMapMouseUp = (event: any) => {
-        handleMiniMapMouseMove(event);
-        minimapCalcConf.navigationOn = false;
-    };
+        const handleMiniMapMouseUp = (event: any) => {
+            handleMiniMapMouseMove(event);
+            minimapCalcConf.navigationOn = false;
+        };
 
-    /**
+        /**
         enables the mini-map fake drag effect see "handleMiniMapMouseMove" above.
      **/
-    const handleMiniMapMouseDown = () => {
-        if (enableNavigation && flowInstance) { minimapCalcConf.navigationOn = true; }
-    };
+        const handleMiniMapMouseDown = () => {
+            if (enableNavigation && flowInstance) {
+                minimapCalcConf.navigationOn = true;
+            }
+        };
 
-    return (
-        <div
-            ref={minimapWrapper}
-            onMouseDown={handleMiniMapMouseDown}
-            onMouseUp={handleMiniMapMouseUp}
-            onMouseMove={handleMiniMapMouseMove}
-            onMouseLeave={handleMiniMapMouseUp}
-            style={flowInstance ? { cursor: "grab" } : {}}
-        >
-            <ReactFlowMiniMap
-                maskColor={maskColor}
-                nodeClassName={nodeClassName}
-                nodeColor={nodeColor}
-                nodeStrokeColor={nodeStrokeColor}
-                {...minimapProps}
-            />
-        </div>
-    );
-});
+        return (
+            <div
+                ref={minimapWrapper}
+                onMouseDown={handleMiniMapMouseDown}
+                onMouseUp={handleMiniMapMouseUp}
+                onMouseMove={handleMiniMapMouseMove}
+                onMouseLeave={handleMiniMapMouseUp}
+                style={flowInstance ? { cursor: "grab" } : {}}
+            >
+                <ReactFlowMiniMap
+                    maskColor={maskColor}
+                    nodeClassName={nodeClassName}
+                    nodeColor={nodeColor}
+                    nodeStrokeColor={nodeStrokeColor}
+                    {...minimapProps}
+                />
+            </div>
+        );
+    }
+);

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

@@ -2,6 +2,7 @@
     &:not([fill]) {
         fill: $reactflow-node-background-color;
     }
+
     &:not([stroke]) {
         stroke: $reactflow-node-border-color;
     }
@@ -30,7 +31,6 @@
 }
 
 .react-flow__minimap-node {
-
     // FIXME: this is a first basic implementation, later it should be possible to highlight without overwriting stroke/fill colors
 
     &[class*="#{$eccgui}-intent--"] {
@@ -44,7 +44,7 @@
         stroke: $eccgui-color-warning-text;
     }
     &.#{$eccgui}-intent--danger {
-        stroke: $eccgui-color-danger-text;
         fill: $eccgui-color-danger-text !important;
+        stroke: $eccgui-color-danger-text;
     }
 }

package/src/extensions/react-flow/minimap/utils.ts

@@ -1,10 +1,13 @@
+import { intentClassName } from "../../../common/Intent";
+
 import { CLASSPREFIX as eccgui } from "./../../../configuration/constants";
 import { nodeContentUtils } from "./../nodes/NodeContent";
-import { intentClassName } from "../../../common/Intent";
 
 const nodeClassName = (node: any) => {
     const typeClass = `${eccgui}-graphviz__minimap__node--` + node.type;
-    const stateClass = node.data?.highlightedState ? nodeContentUtils.gethighlightedStateClasses(node.data.highlightedState, `${eccgui}-graphviz__minimap__node`) : "";
+    const stateClass = node.data?.highlightedState
+        ? nodeContentUtils.gethighlightedStateClasses(node.data.highlightedState, `${eccgui}-graphviz__minimap__node`)
+        : "";
     const intentClass = node.data?.intent ? intentClassName(node.data.intent) : "";
     return `${typeClass} ${intentClass} ${stateClass}`;
 };
@@ -12,15 +15,15 @@ const nodeClassName = (node: any) => {
 const nodeColor = (node: any) => {
     const fillColor = node.data?.style?.backgroundColor || node.data?.style?.borderColor;
     return fillColor ?? "";
-}
+};
 
 const borderColor = (node: any) => {
     const strokeColor = node.data?.style?.borderColor || node.data?.style?.backgroundColor;
     return strokeColor ?? "";
-}
+};
 
 export const miniMapUtils = {
     nodeClassName,
     nodeColor,
     borderColor,
-}
+};

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

@@ -1,6 +1,7 @@
 import React from "react";
-import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+
 import IconButton from "../../../components/Icon/IconButton";
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
 
 export interface NodeContentExtensionProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
@@ -46,13 +47,12 @@ export const NodeContentExtension = ({
     // other props for DOM element
     ...otherProps
 }: NodeContentExtensionProps) => {
-
     // display always exapanded if there is no handler to control it
     const [expanded, expand] = React.useState<boolean>(setExpanded ? isExpanded : true);
     const onToggle = (event: React.MouseEvent<HTMLElement>, isCurrentlyExpanded: boolean) => {
         const willBeExpanded = setExpanded ? setExpanded(event, isCurrentlyExpanded) : isCurrentlyExpanded;
         expand(willBeExpanded);
-    }
+    };
 
     return (
         <div
@@ -63,38 +63,36 @@ export const NodeContentExtension = ({
                 (expanded ? ` ${eccgui}-graphviz__node__extension--expanded` : "")
             }
         >
-            {
-                !expanded && onToggle && (
-                    <IconButton
-                        className={`${eccgui}-graphviz__node__extension-expandbutton`}
-                        name="item-vertmenu"
-                        text={tooltipExpand}
-                        onClick={(e) => { onToggle(e, expanded); }}
-                    />
-                )
-            }
-            {
-                expanded && (
-                    <>
-                        <div className={`${eccgui}-graphviz__node__extension-body`}>
-                            {children}
+            {!expanded && onToggle && (
+                <IconButton
+                    className={`${eccgui}-graphviz__node__extension-expandbutton`}
+                    name="item-vertmenu"
+                    text={tooltipExpand}
+                    onClick={(e: React.MouseEvent<HTMLElement>) => {
+                        onToggle(e, expanded);
+                    }}
+                />
+            )}
+            {expanded && (
+                <>
+                    <div className={`${eccgui}-graphviz__node__extension-body`}>{children}</div>
+                    {(!!actionButtons || !!setExpanded) && (
+                        <div className={`${eccgui}-graphviz__node__extension-actions`}>
+                            {!!setExpanded && (
+                                <IconButton
+                                    className={`${eccgui}-graphviz__node__extension-reducebutton`}
+                                    name="toggler-showless"
+                                    text={tooltipReduce}
+                                    onClick={(e: React.MouseEvent<HTMLElement>) => {
+                                        onToggle(e, expanded);
+                                    }}
+                                />
+                            )}
+                            {actionButtons}
                         </div>
-                        {(!!actionButtons || !!setExpanded) && (
-                            <div className={`${eccgui}-graphviz__node__extension-actions`}>
-                                {!!setExpanded && (
-                                    <IconButton
-                                        className={`${eccgui}-graphviz__node__extension-reducebutton`}
-                                        name="toggler-showless"
-                                        text={tooltipReduce}
-                                        onClick={(e) => { onToggle(e, expanded); }}
-                                    />
-                                )}
-                                {actionButtons}
-                            </div>
-                        )}
-                    </>
-                )
-            }
+                    )}
+                </>
+            )}
         </div>
     );
-}
+};

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

@@ -1,18 +1,19 @@
 import React, { memo } from "react";
-import {
-    NodeProps as ReactFlowNodeProps,
-    Position
-} from "react-flow-renderer";
+import { NodeProps as ReactFlowNodeProps, Position } from "react-flow-renderer";
+
 import { Tooltip } from "../../../index";
-import { NodeContent, NodeContentProps } from "./NodeContent";
 import { ReacFlowVersionSupportProps, useReactFlowVersion } from "../versionsupport";
 
-export interface NodeDefaultProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends ReacFlowVersionSupportProps, ReactFlowNodeProps {
+import { NodeContent, NodeContentProps } from "./NodeContent";
+
+export interface NodeDefaultProps<NODE_DATA, NODE_CONTENT_PROPS = any>
+    extends ReacFlowVersionSupportProps,
+        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>
+    data: NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS>;
 }
 
 // @deprecated use NodeDefaultProps
@@ -23,42 +24,44 @@ export type NodeProps<NODE_DATA, NODE_CONTENT_PROPS = any> = NodeDefaultProps<NO
  * This element cannot be used directly, it must be connected via a `nodeTypes` definition and all properties need to be routed through the `elements` property items inside the `ReactFlow` container.
  * @see https://reactflow.dev/docs/api/nodes/
  */
-export const NodeDefault = memo(
-    (node: NodeDefaultProps<any>) => {
-        const {
-            flowVersion,
-            data,
-            targetPosition = Position.Left,
-            sourcePosition = Position.Right,
-            isConnectable = true,
-            selected
-        } = node;
+export const NodeDefault = memo((node: NodeDefaultProps<any>) => {
+    const {
+        flowVersion,
+        data,
+        targetPosition = Position.Left,
+        sourcePosition = Position.Right,
+        isConnectable = true,
+        selected,
+    } = node;
 
-        const evaluateFlowVersion = useReactFlowVersion();
-        const flowVersionCheck = flowVersion || evaluateFlowVersion;
+    const evaluateFlowVersion = useReactFlowVersion();
+    const flowVersionCheck = flowVersion || evaluateFlowVersion;
 
-        const nodeEl = <NodeContent {...{flowVersion: flowVersionCheck, ...data, targetPosition, sourcePosition, isConnectable, selected}} />
+    const nodeEl = (
+        <NodeContent
+            {...{ flowVersion: flowVersionCheck, ...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>
-                )
-            }
+    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;
     }
-);
+
+    return nodeEl;
+});
 
 export default NodeDefault;

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

@@ -1,68 +1,67 @@
-import React, {memo, useEffect, useState} from "react";
-import {
-    PopoverInteractionKind as BlueprintPopoverInteractionKind,
-} from "@blueprintjs/core";
+import React, { memo, useEffect, useState } from "react";
+import { PopoverInteractionKind as BlueprintPopoverInteractionKind } from "@blueprintjs/core";
+
+import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+import { ContextOverlay, IconButton } from "../../../index";
+
 import { ContextOverlayProps } from "./../../../components/ContextOverlay/ContextOverlay";
-import {ContextOverlay, IconButton} from "../../../index";
-import {CLASSPREFIX as eccgui} from "../../../configuration/constants";
-import {ValidIconName} from "../../../components/Icon/canonicalIconNames";
 
 // Functions regarding the menu that can be called from the outside
 export interface NodeToolsMenuFunctions {
     /** Closes the menu if its open. */
-    closeMenu: () => void
+    closeMenu: () => void;
 }
 
 export interface NodeToolsProps extends Omit<ContextOverlayProps, "children"> {
     children: string | JSX.Element;
     togglerElement?: ValidIconName | JSX.Element;
     togglerText?: string;
-    menuButtonDataTestId?: string
+    menuButtonDataTestId?: string;
     /** If defined this function will be called with the menu API object to be used externally. */
-    menuFunctionsCallback?: (menuFunctions: NodeToolsMenuFunctions) => any
+    menuFunctionsCallback?: (menuFunctions: NodeToolsMenuFunctions) => any;
 }
 
-export const NodeTools = memo(({
-    children,
-    togglerElement = "item-moremenu",
-    togglerText = "Show more options",
-    menuButtonDataTestId,
-    menuFunctionsCallback,
-    ...otherOverlayProps
-}: NodeToolsProps) => {
-    const [isOpen, setIsOpen] = useState<boolean>(false);
+export const NodeTools = memo(
+    ({
+        children,
+        togglerElement = "item-moremenu",
+        togglerText = "Show more options",
+        menuButtonDataTestId,
+        menuFunctionsCallback,
+        ...otherOverlayProps
+    }: NodeToolsProps) => {
+        const [isOpen, setIsOpen] = useState<boolean>(false);
 
-    useEffect(() => {
-        menuFunctionsCallback && menuFunctionsCallback({
-            closeMenu(): void {
-                setIsOpen(false)
-            }
-        })
-    }, [menuFunctionsCallback])
+        useEffect(() => {
+            menuFunctionsCallback &&
+                menuFunctionsCallback({
+                    closeMenu(): void {
+                        setIsOpen(false);
+                    },
+                });
+        }, [menuFunctionsCallback]);
 
-    return (
-        <ContextOverlay
-            isOpen={isOpen}
-            onClose={() => setIsOpen(false)}
-            hoverCloseDelay={500}
-            interactionKind={isOpen ? BlueprintPopoverInteractionKind.HOVER : BlueprintPopoverInteractionKind.CLICK}
-            {...otherOverlayProps}
-            content={(
-                <div className={`${eccgui}-graphviz__nodetools__content`}>
-                    { children }
-                </div>
-            )}
-        >
-            {typeof togglerElement === "string" ? (
-                <IconButton
-                    data-test-id={menuButtonDataTestId}
-                    name={togglerElement}
-                    text={togglerText}
-                    onClick={() => setIsOpen(previous => !previous)}
-                />
-            ) : (
-                <>{ togglerElement }</>
-            )}
-        </ContextOverlay>
-    );
-});
+        return (
+            <ContextOverlay
+                isOpen={isOpen}
+                onClose={() => setIsOpen(false)}
+                hoverCloseDelay={500}
+                interactionKind={isOpen ? BlueprintPopoverInteractionKind.HOVER : BlueprintPopoverInteractionKind.CLICK}
+                {...otherOverlayProps}
+                content={<div className={`${eccgui}-graphviz__nodetools__content`}>{children}</div>}
+            >
+                {typeof togglerElement === "string" ? (
+                    <IconButton
+                        data-test-id={menuButtonDataTestId}
+                        name={togglerElement}
+                        text={togglerText}
+                        onClick={() => setIsOpen((previous) => !previous)}
+                    />
+                ) : (
+                    <>{togglerElement}</>
+                )}
+            </ContextOverlay>
+        );
+    }
+);

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

@@ -8,7 +8,7 @@ type IStickyNote = {
     color: string;
     position: number[];
     dimension: number[];
-}
+};
 
 /**
  * converts a react-flow node with

package/src/extensions/react-flow/nodes/stories/NodeContentExtension.stories.tsx

@@ -1,14 +1,12 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { LoremIpsum } from 'react-lorem-ipsum';
+import { LoremIpsum } from "react-lorem-ipsum";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
 
-import {
-    NodeContentExtension,
-    NodeContentExtensionProps
-} from "./../NodeContentExtension";
 import IconButton from "../../../../components/Icon/IconButton";
 import HtmlContentBlock from "../../../../components/Typography/HtmlContentBlock";
 
+import { NodeContentExtension, NodeContentExtensionProps } from "./../NodeContentExtension";
+
 export default {
     title: "Extensions/React Flow/Node Content Extension",
     component: NodeContentExtension,
@@ -24,7 +22,14 @@ const Template: ComponentStory<typeof NodeContentExtension> = (args: NodeContent
 
 export const Default = Template.bind({});
 Default.args = {
-    actionButtons: <IconButton name="item-question" onClick={(e) => { alert("this is a action button"); }} />,
+    actionButtons: (
+        <IconButton
+            name="item-question"
+            onClick={(e) => {
+                alert("this is a action button");
+            }}
+        />
+    ),
     slideOutOfNode: false,
     isExpanded: false,
     setExpanded: (_event: React.MouseEvent<HTMLElement>, expanded: boolean) => {
@@ -35,7 +40,7 @@ Default.args = {
             <h4>Extension example.</h4>
             <LoremIpsum p={2} avgSentencesPerParagraph={4} random={false} />
         </HtmlContentBlock>
-    )
+    ),
 } as NodeContentExtensionProps;
 
 export const SlideOutOfNode = Template.bind({});