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

package/src/extensions/react-flow/edges/EdgeDefault.tsx

@@ -1,17 +1,13 @@
-import React, { memo } from 'react';
-import {
-    EdgeProps as ReactFlowEdgeProps,
-} from "react-flow-renderer/dist/types";
-import {
-    getMarkerEnd,
-    getEdgeCenter,
-    EdgeText,
-} from "react-flow-renderer";
+import React, { memo } from "react";
+import { EdgeText, getEdgeCenter, getMarkerEnd } from "react-flow-renderer";
+import { EdgeProps as ReactFlowEdgeProps } from "react-flow-renderer/dist/types";
+
+import { intentClassName, IntentTypes } from "../../../common/Intent";
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
-import { IntentTypes, intentClassName } from "../../../common/Intent";
+
 import { nodeContentUtils } from "./../nodes/NodeContent";
 import { NodeHighlightColor } from "./../nodes/sharedTypes";
-import { drawEdgeStraight, drawEdgeStep } from "./utils";
+import { drawEdgeStep, drawEdgeStraight } from "./utils";
 
 export interface EdgeDefaultDataProps {
     /**
@@ -49,41 +45,29 @@ export interface EdgeDefaultProps extends ReactFlowEdgeProps {
     /**
      * Defining content and markers for the edge.
      */
-    data?: EdgeDefaultDataProps,
+    data?: EdgeDefaultDataProps;
     /**
      * Callback handler that returns a SVG path as string to define how the edge is rendered.
      */
     drawSvgPath?: (edge: ReactFlowEdgeProps) => string;
 }
 
-export const EdgeDefault = memo(
-    (edge: EdgeDefaultProps) => {
-        const {
-            data = {},
-            drawSvgPath = drawEdgeStraight,
-            ...edgeOriginalProperties
-        } = edge;
-        const {
-            pathGlowWidth = 10,
-            markerStart,
-            strokeType,
-            intent,
-            highlightColor,
-        } = data;
+export const EdgeDefault = memo((edge: EdgeDefaultProps) => {
+    const { data = {}, drawSvgPath = drawEdgeStraight, ...edgeOriginalProperties } = edge;
+    const { pathGlowWidth = 10, markerStart, strokeType, intent, highlightColor } = data;
 
-        const pathDisplay = drawSvgPath({...edgeOriginalProperties, data});
-        const markerEnd = getMarkerEnd(
-            edgeOriginalProperties.arrowHeadType,
-            edgeOriginalProperties.markerEndId
-        );
-        const edgeCenter = getEdgeCenter({
-            sourceX: edgeOriginalProperties.sourceX,
-            sourceY: edgeOriginalProperties.sourceY,
-            targetX: edgeOriginalProperties.targetX,
-            targetY: edgeOriginalProperties.targetY,
-        });
+    const pathDisplay = drawSvgPath({ ...edgeOriginalProperties, data });
+    const markerEnd = getMarkerEnd(edgeOriginalProperties.arrowHeadType, edgeOriginalProperties.markerEndId);
+    const edgeCenter = getEdgeCenter({
+        sourceX: edgeOriginalProperties.sourceX,
+        sourceY: edgeOriginalProperties.sourceY,
+        targetX: edgeOriginalProperties.targetX,
+        targetY: edgeOriginalProperties.targetY,
+    });
 
-        const edgeLabel = data.renderLabel?.(edgeCenter) ?? (edgeOriginalProperties.label ? (
+    const edgeLabel =
+        data.renderLabel?.(edgeCenter) ??
+        (edgeOriginalProperties.label ? (
             <EdgeText
                 x={edgeCenter[0]}
                 y={edgeCenter[1]}
@@ -96,67 +80,65 @@ export const EdgeDefault = memo(
             />
         ) : null);
 
-        const edgeStyle = edgeOriginalProperties.style ?? {};
-        const {
-            highlightCustomPropertySettings
-        } = nodeContentUtils.evaluateHighlightColors("--edge-highlight", highlightColor);
+    const edgeStyle = edgeOriginalProperties.style ?? {};
+    const { highlightCustomPropertySettings } = nodeContentUtils.evaluateHighlightColors(
+        "--edge-highlight",
+        highlightColor
+    );
 
-        return (
-            <g
-                className={createEdgeDefaultClassName({intent}, "")}
-                style={{
-                    ...edgeStyle,
-                    color: edgeStyle.color || edgeStyle.stroke
-                }}
-            >
-                { highlightColor && (
-                    <path
-                        d={pathDisplay}
-                        className={createEdgeDefaultClassName({highlightColor}, "react-flow__edge-path-highlight")}
-                        strokeWidth={pathGlowWidth}
-                        style={{
-                            ...highlightCustomPropertySettings,
-                        }}
-                    />
-                )}
-                { pathGlowWidth && (
-                    <path
-                        d={pathDisplay}
-                        className={createEdgeDefaultClassName({}, "react-flow__edge-path-glow")}
-                        strokeWidth={pathGlowWidth}
-                    />
-                )}
+    return (
+        <g
+            className={createEdgeDefaultClassName({ intent }, "")}
+            style={{
+                ...edgeStyle,
+                color: edgeStyle.color || edgeStyle.stroke,
+            }}
+        >
+            {highlightColor && (
+                <path
+                    d={pathDisplay}
+                    className={createEdgeDefaultClassName({ highlightColor }, "react-flow__edge-path-highlight")}
+                    strokeWidth={pathGlowWidth}
+                    style={{
+                        ...highlightCustomPropertySettings,
+                    }}
+                />
+            )}
+            {pathGlowWidth && (
                 <path
                     d={pathDisplay}
-                    className={createEdgeDefaultClassName({strokeType})}
-                    markerStart={markerStart}
-                    markerEnd={markerEnd}
+                    className={createEdgeDefaultClassName({}, "react-flow__edge-path-glow")}
+                    strokeWidth={pathGlowWidth}
                 />
-                { edgeLabel }
-            </g>
-        );
-    }
-);
+            )}
+            <path
+                d={pathDisplay}
+                className={createEdgeDefaultClassName({ strokeType })}
+                markerStart={markerStart}
+                markerEnd={markerEnd}
+            />
+            {edgeLabel}
+        </g>
+    );
+});
 
-const createEdgeDefaultClassName = ({
-    strokeType,
-    intent,
-    highlightColor,
-}: EdgeDefaultDataProps, baseClass: string = "react-flow__edge-path") => {
-    const {
-        highlightClassNameSuffix,
-    } = nodeContentUtils.evaluateHighlightColors("--edge-highlight", highlightColor);
-    return baseClass +
-    (strokeType ? ` ${baseClass}--stroke-${strokeType}` : "") +
-    (intent ? ` ${intentClassName(intent)}` : "") +
-    (highlightClassNameSuffix.length > 0
-        ? highlightClassNameSuffix.map(highlight => ` ${eccgui}-graphviz__edge--highlight-${highlight}`).join("")
-        : ""
+const createEdgeDefaultClassName = (
+    { strokeType, intent, highlightColor }: EdgeDefaultDataProps,
+    baseClass = "react-flow__edge-path"
+) => {
+    const { highlightClassNameSuffix } = nodeContentUtils.evaluateHighlightColors("--edge-highlight", highlightColor);
+    return (
+        baseClass +
+        (strokeType ? ` ${baseClass}--stroke-${strokeType}` : "") +
+        (intent ? ` ${intentClassName(intent)}` : "") +
+        (highlightClassNameSuffix.length > 0
+            ? highlightClassNameSuffix.map((highlight) => ` ${eccgui}-graphviz__edge--highlight-${highlight}`).join("")
+            : "")
     );
-}
+};
 
 export const edgeDefaultUtils = {
     createEdgeDefaultClassName,
     drawEdgeStep,
     drawEdgeStraight,
-}
+};

package/src/extensions/react-flow/edges/EdgeStep.tsx

@@ -1,5 +1,6 @@
-import React, { memo } from 'react';
-import { EdgeDefaultProps, EdgeDefaultDataProps, EdgeDefault} from "./EdgeDefault";
+import React, { memo } from "react";
+
+import { EdgeDefault, EdgeDefaultDataProps, EdgeDefaultProps } from "./EdgeDefault";
 import { drawEdgeStep } from "./utils";
 
 interface EdgeStepDataProps extends EdgeDefaultDataProps {
@@ -7,13 +8,9 @@ interface EdgeStepDataProps extends EdgeDefaultDataProps {
 }
 
 export interface EdgeStepProps extends EdgeDefaultProps {
-    data?: EdgeStepDataProps,
+    data?: EdgeStepDataProps;
 }
 
-export const EdgeStep = memo(
-    (edge: EdgeStepProps) => {
-        return (
-            <EdgeDefault {...edge} drawSvgPath={drawEdgeStep} />
-        );
-    }
-);
+export const EdgeStep = memo((edge: EdgeStepProps) => {
+    return <EdgeDefault {...edge} drawSvgPath={drawEdgeStep} />;
+});

package/src/extensions/react-flow/edges/EdgeTools.tsx

@@ -1,9 +1,8 @@
-import React, {memo} from 'react';
-import {ContextOverlay} from "../../../index";
-import {CLASSPREFIX as eccgui} from "../../../configuration/constants";
-import {
-    PopoverInteractionKind as BlueprintPopoverInteractionKind,
-} from "@blueprintjs/core";
+import React, { memo } from "react";
+import { PopoverInteractionKind as BlueprintPopoverInteractionKind } from "@blueprintjs/core";
+
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+import { ContextOverlay } from "../../../index";
 
 import { ContextOverlayProps } from "./../../../components/ContextOverlay/ContextOverlay";
 
@@ -17,25 +16,19 @@ export interface EdgeToolsProps extends Omit<ContextOverlayProps, "children"> {
     children: string | JSX.Element | JSX.Element[];
 }
 
-export const EdgeTools = memo(
-    ({
-        posOffset,
-        children,
-        ...otherProps
-    }: EdgeToolsProps) => {
-        return (
-            <div className={`${eccgui}-graphviz__edgetools-target`} style={{ ...posOffset }}>
-                <ContextOverlay
-                    {...otherProps}
-                    defaultIsOpen={true}
-                    autoFocus={true}
-                    interactionKind={BlueprintPopoverInteractionKind.HOVER}
-                    content={<div className={`${eccgui}-graphviz__edgetools-content`}>{children}</div>}
-                    popoverClassName={`${eccgui}-graphviz__edgetools-overlay`}
-                >
-                    <div className={`${eccgui}-graphviz__edgetools-target`} style={{ ...posOffset }} />
-                </ContextOverlay>
-            </div>
-        );
-    }
-);
+export const EdgeTools = memo(({ posOffset, children, ...otherProps }: EdgeToolsProps) => {
+    return (
+        <div className={`${eccgui}-graphviz__edgetools-target`} style={{ ...posOffset }}>
+            <ContextOverlay
+                {...otherProps}
+                defaultIsOpen={true}
+                autoFocus={true}
+                interactionKind={BlueprintPopoverInteractionKind.HOVER}
+                content={<div className={`${eccgui}-graphviz__edgetools-content`}>{children}</div>}
+                popoverClassName={`${eccgui}-graphviz__edgetools-overlay`}
+            >
+                <div className={`${eccgui}-graphviz__edgetools-target`} style={{ ...posOffset }} />
+            </ContextOverlay>
+        </div>
+    );
+});

package/src/extensions/react-flow/edges/getSmoothStepPath.ts

@@ -50,8 +50,8 @@ export function getSmoothStepPath({
     const cornerWidth = Math.min(borderRadius, Math.abs(targetX - sourceX));
     const cornerHeight = Math.min(borderRadius, Math.abs(targetY - sourceY));
     const cornerSize = Math.min(cornerWidth, cornerHeight, offsetX, offsetY);
-    const cX = typeof centerX !== 'undefined' ? centerX : _centerX;
-    const cY = typeof centerY !== 'undefined' ? centerY : _centerY;
+    const cX = typeof centerX !== "undefined" ? centerX : _centerX;
+    const cY = typeof centerY !== "undefined" ? centerY : _centerY;
 
     let firstCornerPath = "";
     let secondCornerPath = "";

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

@@ -1,27 +1,35 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { loremIpsum } from 'react-lorem-ipsum';
-import { EdgeLabel, IconButton, Badge, Icon, OverflowText } from "./../../../../../index";
-import canonicalIcons from "./../../../../components/Icon/canonicalIconNames";
+import { loremIpsum } from "react-lorem-ipsum";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
 import { helpersArgTypes } from "../../../../../.storybook/helpers";
 
+import { Badge, EdgeLabel, Icon, IconButton, OverflowText } from "./../../../../../index";
+import canonicalIcons from "./../../../../components/Icon/canonicalIconNames";
+
 export default {
     title: "Extensions/React Flow/Custom EdgeLabel",
     component: EdgeLabel,
     argTypes: {
         depiction: {
             control: "select",
-            options: [...(Object.keys(canonicalIcons))],
+            options: [...Object.keys(canonicalIcons)],
         },
         actions: {
             control: "select",
             options: ["Not set", "Icon button", "Icon button small", "Info badge", "Icon badge"],
             mapping: {
                 "Not set": undefined,
-                "Icon button": <IconButton name="item-info" text="Icon button" onClick={()=>alert("Click info")} />,
-                "Icon button small": <IconButton small name="item-info" text="Icon button" onClick={()=>alert("Click info")} />,
+                "Icon button": <IconButton name="item-info" text="Icon button" onClick={() => alert("Click info")} />,
+                "Icon button small": (
+                    <IconButton small name="item-info" text="Icon button" onClick={() => alert("Click info")} />
+                ),
                 "Info badge": <Badge intent="info">Info</Badge>,
-                "Icon badge": <Badge intent="accent" size="small"><Icon name="undefined" small /></Badge>,
+                "Icon badge": (
+                    <Badge intent="accent" size="small">
+                        <Icon name="undefined" small />
+                    </Badge>
+                ),
             },
         },
         intent: {
@@ -30,11 +38,9 @@ export default {
     },
 } as ComponentMeta<typeof EdgeLabel>;
 
-const Template: ComponentStory<typeof EdgeLabel> = (args) => (
-    <EdgeLabel {...args} />
-);
+const Template: ComponentStory<typeof EdgeLabel> = (args) => <EdgeLabel {...args} />;
 
-const labelText = loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 8, random: false }).toString()
+const labelText = loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 8, random: false }).toString();
 
 export const Default = Template.bind({});
 Default.args = {
@@ -45,4 +51,4 @@ export const ReverseEllipsisLabel = Template.bind({});
 ReverseEllipsisLabel.args = {
     text: <OverflowText ellipsis="reverse">{labelText}</OverflowText>,
     title: labelText,
-}
+};

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

@@ -1,9 +1,11 @@
+import { Position } from "react-flow-renderer";
+
 import { EdgeDefaultProps } from "./EdgeDefault";
 import { EdgeStepProps } from "./EdgeStep";
-import { Position } from "react-flow-renderer";
 import { getSmoothStepPath } from "./getSmoothStepPath";
 
-interface EdgePositionCorrectionProps extends Omit<EdgeDefaultProps, "id" | "source" | "target" | "drawSvgPath" | "data"> {
+interface EdgePositionCorrectionProps
+    extends Omit<EdgeDefaultProps, "id" | "source" | "target" | "drawSvgPath" | "data"> {
     correctionLength?: number;
     correctionRadius?: number;
 }
@@ -16,7 +18,7 @@ const posCorrectionEdge = ({
     targetY,
     targetPosition,
     correctionLength = 7,
-    correctionRadius = 7
+    correctionRadius = 7,
 }: EdgePositionCorrectionProps) => {
     let newSourceX = sourceX;
     let newSourceY = sourceY;
@@ -29,21 +31,40 @@ const posCorrectionEdge = ({
         newSourceX = newSourceX - 2 * correctionLength;
         if (sourceY < targetY) {
             newSourceY = sourceY + correctionRadius;
-            startCommandCorrection = startCommandCorrection + ` L ${newSourceX + correctionRadius},${sourceY} A ${correctionRadius} ${correctionRadius} ${90} ${0} ${0} `;
+            startCommandCorrection =
+                startCommandCorrection +
+                ` L ${
+                    newSourceX + correctionRadius
+                },${sourceY} A ${correctionRadius} ${correctionRadius} ${90} ${0} ${0} `;
         } else {
             newSourceY = sourceY - correctionRadius;
-            startCommandCorrection = startCommandCorrection + ` L ${newSourceX + correctionRadius},${sourceY} A ${correctionRadius} ${correctionRadius} ${90} ${0} ${1} `;
+            startCommandCorrection =
+                startCommandCorrection +
+                ` L ${
+                    newSourceX + correctionRadius
+                },${sourceY} A ${correctionRadius} ${correctionRadius} ${90} ${0} ${1} `;
         }
     }
 
     if (sourcePosition === Position.Right && sourceX > targetX) {
-        newSourceX = targetPosition === Position.Right ? newSourceX + correctionLength + correctionRadius : newSourceX + correctionLength;
+        newSourceX =
+            targetPosition === Position.Right
+                ? newSourceX + correctionLength + correctionRadius
+                : newSourceX + correctionLength;
         if (sourceY < targetY) {
             newSourceY = sourceY + correctionRadius;
-            startCommandCorrection = startCommandCorrection + ` L ${newSourceX - correctionRadius},${sourceY} A ${correctionRadius} ${correctionRadius} ${90} ${0} ${1} `;
+            startCommandCorrection =
+                startCommandCorrection +
+                ` L ${
+                    newSourceX - correctionRadius
+                },${sourceY} A ${correctionRadius} ${correctionRadius} ${90} ${0} ${1} `;
         } else {
             newSourceY = sourceY - correctionRadius;
-            startCommandCorrection = startCommandCorrection + ` L ${newSourceX - correctionRadius},${sourceY} A ${correctionRadius} ${correctionRadius} ${90} ${0} ${0} `;
+            startCommandCorrection =
+                startCommandCorrection +
+                ` L ${
+                    newSourceX - correctionRadius
+                },${sourceY} A ${correctionRadius} ${correctionRadius} ${90} ${0} ${0} `;
         }
     }
 
@@ -51,10 +72,14 @@ const posCorrectionEdge = ({
         newTargetX = newTargetX - 3 * correctionLength;
         if (sourceY < targetY) {
             newTargetY = targetY - correctionRadius;
-            endCommandCorrection = ` A ${correctionRadius} ${correctionRadius} ${90} ${0} ${0} ${newTargetX + correctionRadius},${targetY} L ${targetX},${targetY}`;
+            endCommandCorrection = ` A ${correctionRadius} ${correctionRadius} ${90} ${0} ${0} ${
+                newTargetX + correctionRadius
+            },${targetY} L ${targetX},${targetY}`;
         } else {
             newTargetY = targetY + correctionRadius;
-            endCommandCorrection = ` A ${correctionRadius} ${correctionRadius} ${90} ${0} ${1} ${newTargetX + correctionRadius},${targetY} L ${targetX},${targetY}`;
+            endCommandCorrection = ` A ${correctionRadius} ${correctionRadius} ${90} ${0} ${1} ${
+                newTargetX + correctionRadius
+            },${targetY} L ${targetX},${targetY}`;
         }
     }
 
@@ -62,10 +87,14 @@ const posCorrectionEdge = ({
         newTargetX = newTargetX + 3 * correctionLength;
         if (sourceY < targetY) {
             newTargetY = targetY - correctionRadius;
-            endCommandCorrection = ` A ${correctionRadius} ${correctionRadius} ${90} ${0} ${1} ${newTargetX - correctionRadius},${targetY} L ${targetX},${targetY}`;
+            endCommandCorrection = ` A ${correctionRadius} ${correctionRadius} ${90} ${0} ${1} ${
+                newTargetX - correctionRadius
+            },${targetY} L ${targetX},${targetY}`;
         } else {
             newTargetY = targetY + correctionRadius;
-            endCommandCorrection = ` A ${correctionRadius} ${correctionRadius} ${90} ${0} ${0} ${newTargetX - correctionRadius},${targetY} L ${targetX},${targetY}`;
+            endCommandCorrection = ` A ${correctionRadius} ${correctionRadius} ${90} ${0} ${0} ${
+                newTargetX - correctionRadius
+            },${targetY} L ${targetX},${targetY}`;
         }
     }
 
@@ -76,8 +105,8 @@ const posCorrectionEdge = ({
         newTargetY,
         startCommandCorrection,
         endCommandCorrection,
-    }
-}
+    };
+};
 
 interface PathCommandCorrectionProps {
     pathCommand: string;
@@ -85,13 +114,9 @@ interface PathCommandCorrectionProps {
     endCorrection: string;
 }
 
-const pathCommandCorrection = ({
-    pathCommand,
-    startCorrection,
-    endCorrection,
-}: PathCommandCorrectionProps) => {
+const pathCommandCorrection = ({ pathCommand, startCorrection, endCorrection }: PathCommandCorrectionProps) => {
     return startCorrection + pathCommand.substring(1) + endCorrection;
-}
+};
 
 export const drawEdgeStraight = ({
     sourceX,
@@ -108,7 +133,7 @@ export const drawEdgeStraight = ({
         targetX,
         targetY,
         targetPosition,
-        correctionRadius: 0
+        correctionRadius: 0,
     });
 
     const pathCommand = `M ${corrections.newSourceX},${corrections.newSourceY}L ${corrections.newTargetX},${corrections.newTargetY}`;
@@ -118,7 +143,7 @@ export const drawEdgeStraight = ({
         startCorrection: corrections.startCommandCorrection,
         endCorrection: corrections.endCommandCorrection,
     });
-}
+};
 
 export const drawEdgeStep = ({
     sourceX,
@@ -129,7 +154,6 @@ export const drawEdgeStep = ({
     targetPosition,
     data = {},
 }: EdgeStepProps) => {
-
     const corrections = posCorrectionEdge({
         sourceX,
         sourceY,
@@ -148,7 +172,7 @@ export const drawEdgeStep = ({
         targetX: corrections.newTargetX,
         targetY: corrections.newTargetY,
         targetPosition,
-        borderRadius: data.stepCornerRadius || 7
+        borderRadius: data.stepCornerRadius || 7,
     });
 
     return pathCommandCorrection({
@@ -156,4 +180,4 @@ export const drawEdgeStep = ({
         startCorrection: corrections.startCommandCorrection,
         endCorrection: corrections.endCommandCorrection,
     });
-}
+};

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

@@ -4,7 +4,7 @@ import { PopoverInteractionKind as BlueprintPopoverInteractionKind } from "@blue
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
 import { ContextOverlay, TestableComponent } from "../../../index";
 
-import {ContextOverlayProps} from "./../../../components/ContextOverlay/ContextOverlay";
+import { ContextOverlayProps } from "./../../../components/ContextOverlay/ContextOverlay";
 
 export interface HandleToolsProps
     extends Omit<ContextOverlayProps, "children" | "content" | "popoverClassName">,

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

@@ -1,7 +1,6 @@
 import React, { FC } from "react";
 
 // FIXME: we need to check how these markers are used and if we can justify the namings
-
 import { MarkerArrowClosedInverse } from "./MarkerArrowClosedInverse";
 
 const ReactFlowMarkers: FC = () => {
@@ -14,7 +13,4 @@ const ReactFlowMarkers: FC = () => {
     );
 };
 
-export {
-    MarkerArrowClosedInverse,
-    ReactFlowMarkers
-}
+export { MarkerArrowClosedInverse, ReactFlowMarkers };