@eccenca/gui-elements 22.0.1 → 22.1.0-rc.0

package/src/extensions/react-flow/edges/_edges.scss

@@ -104,42 +104,17 @@ path.react-flow__edge-path-glow {
     }
 }
 
-.react-flow__edge-implicitEdge {
-    stroke: #00acc1;
-    color: #00acc1;
-}
-
-.react-flow__edge-importEdge {
-    stroke: #8e24aa;
-    color: #8e24aa;
-}
-
-.react-flow__edge-subclassEdge {
-    stroke: darken($button-background-color, 60%);
-    color: darken($button-background-color, 60%);
-}
-
-.react-flow__edge-subpropertyEdge {
-    stroke: darken(complement($button-background-color), 40%);
-    color: darken(complement($button-background-color), 40%);
-}
-
-.react-flow__edge-rdftypeEdge {
-    stroke: darken($button-background-color, 50%);
-    color: darken($button-background-color, 50%);
-}
-
-.react-flow__edge-successStep {
+.react-flow__edge-success {
     stroke: $eccgui-color-success-text;
     color: $eccgui-color-success-text;
 }
 
-.react-flow__edge-warningStep {
+.react-flow__edge-warning {
     stroke: $eccgui-color-warning-text;
     color: $eccgui-color-warning-text;
 }
 
-.react-flow__edge-dangerStep {
+.react-flow__edge-danger {
     stroke: $eccgui-color-danger-text;
     color: $eccgui-color-danger-text;
 }

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

@@ -1,14 +1,131 @@
 import { EdgeDefaultProps } from "./EdgeDefault";
 import { EdgeStepProps } from "./EdgeStep";
-import { getSmoothStepPath } from "react-flow-renderer";
+import { getSmoothStepPath, Position } from "react-flow-renderer";
+
+interface EdgePositionCorrectionProps extends Omit<EdgeDefaultProps, "id" | "source" | "target" | "drawSvgPath" | "data"> {
+    correctionLength?: number;
+    correctionRadius?: number;
+}
+
+const posCorrectionEdge = ({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+    correctionLength = 7,
+    correctionRadius = 7
+}: EdgePositionCorrectionProps) => {
+    let newSourceX = sourceX;
+    let newSourceY = sourceY;
+    let newTargetX = targetX;
+    let newTargetY = targetY;
+    let startCommandCorrection = `M ${sourceX},${sourceY} `;
+    let endCommandCorrection = ``;
+
+    if (sourcePosition === Position.Left && sourceX < targetX) {
+        newSourceX = newSourceX - correctionLength;
+        if (sourceY < targetY) {
+            newSourceY = sourceY + 2 * correctionRadius;
+            startCommandCorrection = startCommandCorrection + ` L ${newSourceX},${sourceY} A ${correctionRadius} ${correctionRadius} ${180} ${1} ${0} `;
+        } else {
+            newSourceY = sourceY - 2 * correctionRadius;
+            startCommandCorrection = startCommandCorrection + ` L ${newSourceX},${sourceY} A ${correctionRadius} ${correctionRadius} ${180} ${1} ${1} `;
+        }
+    }
+
+    if (sourcePosition === Position.Right && sourceX > targetX) {
+        newSourceX = targetPosition === Position.Right ? newSourceX + correctionLength + correctionRadius : newSourceX + correctionLength;
+        if (sourceY < targetY) {
+            newSourceY = targetPosition === Position.Right ? sourceY + 1 * correctionRadius : sourceY + 2 * correctionRadius;
+            startCommandCorrection = targetPosition === Position.Right ? (
+                startCommandCorrection + ` L ${newSourceX - correctionRadius},${sourceY} A ${correctionRadius} ${correctionRadius} ${90} ${0} ${1} `
+            ) : (
+                startCommandCorrection + ` L ${newSourceX},${sourceY} A ${correctionRadius} ${correctionRadius} ${180} ${1} ${1} `
+            );
+        } else {
+            newSourceY = targetPosition === Position.Right ? sourceY - 1 * correctionRadius : sourceY - 2 * correctionRadius;
+            startCommandCorrection = targetPosition === Position.Right ? (
+                startCommandCorrection + ` L ${newSourceX - correctionRadius},${sourceY} A ${correctionRadius} ${correctionRadius} ${90} ${0} ${0} `
+            ) : (
+                startCommandCorrection + ` L ${newSourceX},${sourceY} A ${correctionRadius} ${correctionRadius} ${180} ${1} ${0} `
+            );
+        }
+    }
+
+    if (targetPosition === Position.Left && sourceX > targetX) {
+        newTargetX = newTargetX - correctionLength;
+        if (sourceY < targetY) {
+            newTargetY = targetY - 2 * correctionRadius;
+            endCommandCorrection = ` A ${correctionRadius} ${correctionRadius} ${180} ${1} ${0} ${newTargetX},${targetY} L ${targetX},${targetY}`;
+        } else {
+            newTargetY = targetY + 2 * correctionRadius;
+            endCommandCorrection = ` A ${correctionRadius} ${correctionRadius} ${180} ${1} ${1} ${newTargetX},${targetY} L ${targetX},${targetY}`;
+        }
+    }
+
+    if (targetPosition === Position.Right && sourceX < targetX) {
+        newTargetX = newTargetX + correctionLength;
+        if (sourceY < targetY) {
+            newTargetY = targetY - 2 * correctionRadius;
+            endCommandCorrection = ` A ${correctionRadius} ${correctionRadius} ${180} ${1} ${1} ${newTargetX},${targetY} L ${targetX},${targetY}`;
+        } else {
+            newTargetY = targetY + 2 * correctionRadius;
+            endCommandCorrection = ` A ${correctionRadius} ${correctionRadius} ${180} ${1} ${0} ${newTargetX},${targetY} L ${targetX},${targetY}`;
+        }
+    }
+
+
+    return {
+        newSourceX,
+        newSourceY,
+        newTargetX,
+        newTargetY,
+        startCommandCorrection,
+        endCommandCorrection,
+    }
+}
+
+interface PathCommandCorrectionProps {
+    pathCommand: string;
+    startCorrection: string;
+    endCorrection: string;
+}
+
+const pathCommandCorrection = ({
+    pathCommand,
+    startCorrection,
+    endCorrection,
+}: PathCommandCorrectionProps) => {
+    return startCorrection + pathCommand.substring(1) + endCorrection;
+}
 
 export const drawEdgeStraight = ({
     sourceX,
     sourceY,
+    sourcePosition,
     targetX,
     targetY,
+    targetPosition,
 }: EdgeDefaultProps) => {
-    return `M ${sourceX},${sourceY}L ${targetX},${targetY}`;
+    const corrections = posCorrectionEdge({
+        sourceX,
+        sourceY,
+        sourcePosition,
+        targetX,
+        targetY,
+        targetPosition,
+        correctionRadius: 0
+    });
+
+    const pathCommand = `M ${corrections.newSourceX},${corrections.newSourceY}L ${corrections.newTargetX},${corrections.newTargetY}`;
+
+    return pathCommandCorrection({
+        pathCommand,
+        startCorrection: corrections.startCommandCorrection,
+        endCorrection: corrections.endCommandCorrection,
+    });
 }
 
 export const drawEdgeStep = ({
@@ -20,13 +137,31 @@ export const drawEdgeStep = ({
     targetPosition,
     data = {},
 }: EdgeStepProps) => {
-    return getSmoothStepPath({
+
+    const corrections = posCorrectionEdge({
         sourceX,
         sourceY,
         sourcePosition,
         targetX,
         targetY,
         targetPosition,
-        borderRadius: data.stepCornerRadius || 10
+        correctionLength: data.stepCornerRadius || 7,
+        correctionRadius: data.stepCornerRadius || 7,
+    });
+
+    const pathCommand = getSmoothStepPath({
+        sourceX: corrections.newSourceX,
+        sourceY: corrections.newSourceY,
+        sourcePosition,
+        targetX: corrections.newTargetX,
+        targetY: corrections.newTargetY,
+        targetPosition,
+        borderRadius: data.stepCornerRadius || 7
+    });
+
+    return pathCommandCorrection({
+        pathCommand,
+        startCorrection: corrections.startCommandCorrection,
+        endCorrection: corrections.endCommandCorrection,
     });
 }

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

@@ -22,14 +22,14 @@ div.react-flow__handle {
         right: $eccgui-size-block-whitespace/-2;
         opacity: 0.61;
         display: none;
-        background-color: transparent;
+        background-color: currentColor;
         border: solid 1px currentColor;
         border-radius: 100%;
     }
 
     &:hover {
         &:before {
-            background-color: currentColor;
+            box-shadow: 0 0 $eccgui-size-block-whitespace/2 $eccgui-size-block-whitespace/4 currentColor;
         }
     }
 
@@ -47,14 +47,14 @@ div.react-flow__handle {
         }
     }
 
-    &.react-flow__handle-connecting:hover {
+    &.react-flow__handle-connecting:hover, &.invalid-handle {
         color: $eccgui-color-danger-text;
         &:before {
             display: block;
         }
     }
 
-    &.react-flow__handle-valid:hover {
+    &.react-flow__handle-valid:hover, &.valid-handle {
         color: $eccgui-color-success-text;
     }
 }
@@ -152,57 +152,3 @@ div.react-flow__handle-bottom {
         }
     }
 }
-
-.react-flow__node-graphNode {
-    .react-flow__handle {
-        color: #8e24aa;
-    }
-}
-
-.react-flow__node-classNode {
-    .react-flow__handle {
-        color: darken($button-background-color, 60%);
-    }
-}
-
-.react-flow__node-instanceNode {
-    .react-flow__handle {
-        color: darken($button-background-color, 50%);
-    }
-}
-
-.react-flow__node-propertyNode {
-    .react-flow__handle {
-        color: darken(complement($button-background-color), 40%);
-    }
-}
-
-.react-flow__node-datasetNode {
-    .react-flow__handle {
-        color: #039be5;
-    }
-}
-
-.react-flow__node-linkingNode {
-    .react-flow__handle {
-        color: #00acc1;
-    }
-}
-
-.react-flow__node-transformNode {
-    .react-flow__handle {
-        color: #00897b;
-    }
-}
-
-.react-flow__node-taskNode {
-    .react-flow__handle {
-        color: #546e7a;
-    }
-}
-
-.react-flow__node-workflowNode {
-    .react-flow__handle {
-        color: #4527a0;
-    }
-}

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

@@ -3,51 +3,6 @@
     fill: $reactflow-node-background-color;
 }
 
-.#{$eccgui}-graphviz__minimap__node--graphNode {
-    fill: #8e24aa;
-    stroke: #8e24aa;
-}
-
-.#{$eccgui}-graphviz__minimap__node--classNode {
-    fill: darken($button-background-color, 60%);
-    stroke: darken($button-background-color, 60%);
-}
-
-.#{$eccgui}-graphviz__minimap__node--instanceNode {
-    fill: darken($button-background-color, 50%);
-    stroke: darken($button-background-color, 50%);
-}
-
-.#{$eccgui}-graphviz__minimap__node--propertyNode {
-    fill: darken(complement($button-background-color), 40%);
-    stroke: darken(complement($button-background-color), 40%);
-}
-
-.#{$eccgui}-graphviz__minimap__node--datasetNode {
-    fill: #039be5;
-    stroke: #039be5;
-}
-
-.#{$eccgui}-graphviz__minimap__node--linkingNode {
-    fill: #00acc1;
-    stroke: #00acc1;
-}
-
-.#{$eccgui}-graphviz__minimap__node--transformNode {
-    fill: #00897b;
-    stroke: #00897b;
-}
-
-.#{$eccgui}-graphviz__minimap__node--taskNode {
-    fill: #546e7a;
-    stroke: #546e7a;
-}
-
-.#{$eccgui}-graphviz__minimap__node--workflowNode {
-    fill: #4527a0;
-    stroke: #4527a0;
-}
-
 .#{$eccgui}-graphviz__minimap__node--highlight-match {
     stroke: $eccgui-color-accent;
     stroke-width: 5;

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

@@ -8,13 +8,13 @@ import {ValidIconName} from "../../../components/Icon/canonicalIconNames";
 import { HandleDefault, HandleProps } from "./../handles/HandleDefault";
 import { NodeProps } from "./NodeDefault";
 
-type HighlightingState = "success" | "warning" | "danger" | "match" | "altmatch";
+export type HighlightingState = "success" | "warning" | "danger" | "match" | "altmatch";
 
 export interface IHandleProps extends HandleProps {
     category?: "configuration";
 }
 
-interface NodeContentData {
+interface NodeContentData<CONTENT_PROPS = any> {
     /**
      * Name of icon that should be displayed before the node label.
      * Must be a name from our list of canonical icon names.
@@ -31,14 +31,14 @@ interface NodeContentData {
     /**
      * Content element, displayed in the node body.
      */
-    content?: React.ReactNode;
+    content?: React.ReactNode | ((adjustedContentProps: Partial<CONTENT_PROPS>) => React.ReactNode);
     /**
      * Content extension, displayed at the bottom side of a node.
      */
     contentExtension?: React.ReactNode;
 }
 
-export interface NodeContentProps<T> extends NodeContentData, React.HTMLAttributes<HTMLDivElement> {
+export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends NodeContentData, React.HTMLAttributes<HTMLDivElement> {
     /**
      * Size of the node.
      * If `minimalShape` is not set to `none`then the configured size definition is only used for the selected node state.
@@ -66,7 +66,7 @@ export interface NodeContentProps<T> extends NodeContentData, React.HTMLAttribut
     /**
      * Set of defined buttons and icons that can be displayed.
      */
-    executionButtons?: () => React.ReactNode;
+    executionButtons?: (adjustedContentProps: Partial<NODE_CONTENT_PROPS>, setAdjustedContentProps: React.Dispatch<React.SetStateAction<Partial<NODE_CONTENT_PROPS>>>) => React.ReactElement<NODE_CONTENT_PROPS>;
     /**
      * Can be used for permanent action button or context menu.
      * It is displayed at the node header right to the label.
@@ -89,7 +89,7 @@ export interface NodeContentProps<T> extends NodeContentData, React.HTMLAttribut
      * Callback function to provide content for the tooltip on a node with a defined `minimalShape`.
      * If you do not want a tooltip in this state you need to provide a callback that returns an empty value.
      */
-    getMinimalTooltipData?: (node: NodeProps<T>) => NodeContentData;
+    getMinimalTooltipData?: (node: NodeProps<NODE_DATA>) => NodeContentData;
     /**
      * Set if a handle is displayed even if it does not allow a connection to an edge.
      */
@@ -100,7 +100,7 @@ export interface NodeContentProps<T> extends NodeContentData, React.HTMLAttribut
     animated?:boolean;
 
     /** Additional data stored in the node. */
-    businessData?: T;
+    businessData?: NODE_DATA;
 
     // we need to forward some ReactFlowNodeProps here
 
@@ -201,129 +201,130 @@ const MemoHandler = React.memo(
  * The `NodeContent` element manages the main view of how a node is displaying which content.
  * This element cannot be used directly, all properties must be routed through the `data` property of an `elements` property item inside the `ReactFlow` container.
  */
-export const NodeContent = ({
-    iconName,
-    depiction,
-    typeLabel,
-    label,
-    showExecutionButtons = true,
-    executionButtons,
-    menuButtons,
-    content,
-    contentExtension,
-    size = "small",
-    minimalShape = "circular",
-    highlightedState,
-    handles = defaultHandles,
-    adaptHeightForHandleMinCount,
-    adaptSizeIncrement = 15,
-    getMinimalTooltipData = getDefaultMinimalTooltipData,
-    style = {},
-    showUnconnectableHandles = false,
-    animated = false,
-    // forwarded props
-    targetPosition = Position.Left,
-    sourcePosition = Position.Right,
-    isConnectable = true,
-    selected,
-    // businessData is just being ignored
-    businessData,
-    // other props for DOM element
-    ...otherProps
-}: NodeContentProps<any>) => {
-    const handleStack: { [key: string]: IHandleProps[] } = {};
-    handleStack[Position.Top] = [] as IHandleProps[];
-    handleStack[Position.Right] = [] as IHandleProps[];
-    handleStack[Position.Bottom] = [] as IHandleProps[];
-    handleStack[Position.Left] = [] as IHandleProps[];
-    if (handles.length > 0) {
-        handles.forEach(handle => {
-            if (!!handle.position) {
-                handleStack[handle.position].push(handle);
-            }
-            else if (handle.category === "configuration") {
-                handleStack[Position.Top].push(handle);
-            }
-            else {
-                if (handle.type === "target") {
-                    handleStack[targetPosition].push(handle);
-                }
-                if (handle.type === "source") {
-                    handleStack[sourcePosition].push(handle);
-                }
-            }
-        });
-    }
-    const styleExpandDimensions: { [key: string]: string | number } = {};
-    if (
-        typeof adaptHeightForHandleMinCount !== "undefined" &&
-        (minimalShape === "none" || !!selected) &&
-        adaptSizeIncrement && (
-            handleStack[Position.Left].length >= adaptHeightForHandleMinCount ||
-            handleStack[Position.Right].length >= adaptHeightForHandleMinCount
-        )
-    ) {
-        const minHeightLeft = handleStack[Position.Left].length * adaptSizeIncrement;
-        const minHeightRight = handleStack[Position.Right].length * adaptSizeIncrement;
-        styleExpandDimensions["minHeight"] = Math.max(minHeightLeft, minHeightRight);
-    }
-    return (
-        <>
-            <section
-                {...otherProps}
-                style={{...style, ...styleExpandDimensions}}
-                className={
-                    `${eccgui}-graphviz__node` +
-                    ` ${eccgui}-graphviz__node--${size}` +
-                    ` ${eccgui}-graphviz__node--minimal-${minimalShape}` +
-                    (!!highlightedState ? " " + gethighlightedStateClasses(highlightedState, `${eccgui}-graphviz__node`) : "") +
-                    (animated ? ` ${eccgui}-graphviz__node--animated` : "") +
-                    (showUnconnectableHandles === false ? ` ${eccgui}-graphviz__node--hidehandles` : "")
-                }
-            >
-                <header className={`${eccgui}-graphviz__node__header`}>
-                    {(!!iconName || !!depiction) && (
-                        <span
-                            className={`${eccgui}-graphviz__node__header-depiction`}
-                        >
-                            {!!depiction && imgWithTooltip(<img src={depiction} alt="" />, (minimalShape === "none" || selected) ? typeLabel : undefined)}
-                            {(!!iconName && !depiction) && <Icon name={iconName} tooltipText={(minimalShape === "none" || selected) ? typeLabel : undefined} />}
-                        </span>
-                    )}
-                    <span
-                        className={`${eccgui}-graphviz__node__header-label`}
-                        title={label}
-                    >
-                        {label}
-                    </span>
-                    {(menuButtons || (showExecutionButtons && executionButtons)) && (
-                        <span
-                            className={`${eccgui}-graphviz__node__header-menu`}
-                        >
-                            {(showExecutionButtons && typeof executionButtons === "function") ? executionButtons() : null}
-                            {menuButtons??null}
-                        </span>
-                    )}
-                </header>
-                {content && (
-                    <div className={`${eccgui}-graphviz__node__content`}>
-                        {content}
-                    </div>
-                )}
-                {contentExtension && (
-                    <div className={`${eccgui}-graphviz__node__footer`}>
-                        {contentExtension}
-                    </div>
-                )}
-            </section>
-            {!!handles && (
-                <>
-                    { addHandles(handleStack, Position.Top, "left", isConnectable, style) }
-                    { addHandles(handleStack, Position.Right, "top", isConnectable, style) }
-                    { addHandles(handleStack, Position.Bottom, "left", isConnectable, style) }
-                    { addHandles(handleStack, Position.Left, "top", isConnectable, style) }
-                </>
-            )}
-        </>
-    );
-}
+ export function NodeContent <CONTENT_PROPS = any>({
+     iconName,
+     depiction,
+     typeLabel,
+     label,
+     showExecutionButtons = true,
+     executionButtons,
+     menuButtons,
+     content,
+     contentExtension,
+     size = "small",
+     minimalShape = "circular",
+     highlightedState,
+     handles = defaultHandles,
+     adaptHeightForHandleMinCount,
+     adaptSizeIncrement = 15,
+     getMinimalTooltipData = getDefaultMinimalTooltipData,
+     style = {},
+     showUnconnectableHandles = false,
+     animated = false,
+     // forwarded props
+     targetPosition = Position.Left,
+     sourcePosition = Position.Right,
+     isConnectable = true,
+     selected,
+     // businessData is just being ignored
+     businessData,
+     // other props for DOM element
+     ...otherProps
+ }: NodeContentProps<any>) {
+     const [adjustedContentProps, setAdjustedContentProps] = React.useState<Partial<CONTENT_PROPS>>({})
+     const handleStack: { [key: string]: IHandleProps[] } = {};
+     handleStack[Position.Top] = [] as IHandleProps[];
+     handleStack[Position.Right] = [] as IHandleProps[];
+     handleStack[Position.Bottom] = [] as IHandleProps[];
+     handleStack[Position.Left] = [] as IHandleProps[];
+     if (handles.length > 0) {
+         handles.forEach(handle => {
+             if (!!handle.position) {
+                 handleStack[handle.position].push(handle);
+             }
+             else if (handle.category === "configuration") {
+                 handleStack[Position.Top].push(handle);
+             }
+             else {
+                 if (handle.type === "target") {
+                     handleStack[targetPosition].push(handle);
+                 }
+                 if (handle.type === "source") {
+                     handleStack[sourcePosition].push(handle);
+                 }
+             }
+         });
+     }
+     const styleExpandDimensions: { [key: string]: string | number } = {};
+     if (
+         typeof adaptHeightForHandleMinCount !== "undefined" &&
+         (minimalShape === "none" || !!selected) &&
+         adaptSizeIncrement && (
+             handleStack[Position.Left].length >= adaptHeightForHandleMinCount ||
+             handleStack[Position.Right].length >= adaptHeightForHandleMinCount
+         )
+     ) {
+         const minHeightLeft = handleStack[Position.Left].length * adaptSizeIncrement;
+         const minHeightRight = handleStack[Position.Right].length * adaptSizeIncrement;
+         styleExpandDimensions["minHeight"] = Math.max(minHeightLeft, minHeightRight);
+     }
+     return (
+         <>
+             <section
+                 {...otherProps}
+                 style={{...style, ...styleExpandDimensions}}
+                 className={
+                     `${eccgui}-graphviz__node` +
+                     ` ${eccgui}-graphviz__node--${size}` +
+                     ` ${eccgui}-graphviz__node--minimal-${minimalShape}` +
+                     (!!highlightedState ? " " + gethighlightedStateClasses(highlightedState, `${eccgui}-graphviz__node`) : "") +
+                     (animated ? ` ${eccgui}-graphviz__node--animated` : "") +
+                     (showUnconnectableHandles === false ? ` ${eccgui}-graphviz__node--hidehandles` : "")
+                 }
+             >
+                 <header className={`${eccgui}-graphviz__node__header`}>
+                     {(!!iconName || !!depiction) && (
+                         <span
+                             className={`${eccgui}-graphviz__node__header-depiction`}
+                         >
+                             {!!depiction && imgWithTooltip(<img src={depiction} alt="" />, (minimalShape === "none" || selected) ? typeLabel : undefined)}
+                             {(!!iconName && !depiction) && <Icon name={iconName} tooltipText={(minimalShape === "none" || selected) ? typeLabel : undefined} />}
+                         </span>
+                     )}
+                     <span
+                         className={`${eccgui}-graphviz__node__header-label`}
+                         title={label}
+                     >
+                         {label}
+                     </span>
+                     {(menuButtons || (showExecutionButtons && executionButtons)) && (
+                         <span
+                             className={`${eccgui}-graphviz__node__header-menu`}
+                         >
+                             {(showExecutionButtons && typeof executionButtons === "function") ? executionButtons(adjustedContentProps, setAdjustedContentProps) : null}
+                             {menuButtons??null}
+                         </span>
+                     )}
+                 </header>
+                 {content && (
+                     <div className={`${eccgui}-graphviz__node__content`}>
+                         {typeof content === "function" ? content(adjustedContentProps) : content}
+                     </div>
+                 )}
+                 {contentExtension && (
+                     <div className={`${eccgui}-graphviz__node__footer`}>
+                         {contentExtension}
+                     </div>
+                 )}
+             </section>
+             {!!handles && (
+                 <>
+                     { addHandles(handleStack, Position.Top, "left", isConnectable, style) }
+                     { addHandles(handleStack, Position.Right, "top", isConnectable, style) }
+                     { addHandles(handleStack, Position.Bottom, "left", isConnectable, style) }
+                     { addHandles(handleStack, Position.Left, "top", isConnectable, style) }
+                 </>
+             )}
+         </>
+     );
+ }