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

package/src/components/Notification/Notification.stories.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { LoremIpsum } from 'react-lorem-ipsum';
+
+import Notification from "./Notification";
+import HtmlContentBlock from "./../Typography/HtmlContentBlock";
+import Button from "./../Button/Button";
+import Spacing from "./../Separation/Spacing";
+
+export default {
+    title: "Components/Notification",
+    component: Notification,
+    argTypes: {
+        className: {
+            description: "A space-delimited list of class names.",
+            control: "text",
+            table: {
+                defaultValue: { summary: undefined },
+                type: { summary: "string" },
+            }
+        },
+        onDismiss: {
+            description: "Callback invoked when the toast is dismissed, either by the user or by the timeout.",
+            control: "none",
+            table: {
+                defaultValue: { summary: undefined },
+                type: { summary: "(didTimeoutExpire: boolean) => void" },
+            }
+        },
+        timeout: {
+            description: "Milliseconds to wait before automatically dismissing toast. Providing a value less than or equal to 0 will disable the timeout.",
+            control: "number",
+            table: {
+                defaultValue: { summary: 0 },
+                type: { summary: "number" },
+            }
+        },
+        message: {
+            control: "none",
+        },
+    },
+} as ComponentMeta<typeof Notification>;
+
+const TemplateFull: ComponentStory<typeof Notification> = (args) => (
+    <Notification {...args} />
+);
+
+export const ExampleWithMessage = TemplateFull.bind({});
+ExampleWithMessage.args = {
+    message: <LoremIpsum p={1} avgSentencesPerParagraph={2} random={false} />,
+    onDismiss: false, // workaround for undefined function in Storybook
+};
+
+export const ExampleWithChildren = TemplateFull.bind({});
+ExampleWithChildren.args = {
+    children: (
+        <HtmlContentBlock>
+            <LoremIpsum p={1} avgSentencesPerParagraph={1} random={false} />
+            <LoremIpsum p={1} avgSentencesPerParagraph={4} random={false} />
+        </HtmlContentBlock>
+    ),
+    onDismiss: false, // workaround for undefined function in Storybook
+};
+
+export const ExampleNeutralMessage = TemplateFull.bind({});
+ExampleNeutralMessage.args = {
+    message: <LoremIpsum p={1} avgSentencesPerParagraph={2} random={false} />,
+    onDismiss: false, // workaround for undefined function in Storybook
+    neutral: true,
+};
+
+export const ExampleWithActions = TemplateFull.bind({});
+ExampleWithActions.args = {
+    message: <LoremIpsum p={1} avgSentencesPerParagraph={2} random={false} />,
+    onDismiss: false, // workaround for undefined function in Storybook
+    danger: true,
+    actions: [
+        <Button text="Something" key="b1" />,
+        <Spacing size="tiny" vertical />,
+        <Button text="Important" hasStateDanger key="b2" />
+    ]
+};

package/src/components/Notification/Notification.tsx

@@ -1,9 +1,65 @@
 import React from "react";
-import { Toast as BlueprintToast, Classes as BlueprintClassNames } from "@blueprintjs/core";
+import {
+    Toast as BlueprintToast,
+    ToastProps as BlueprintToastProps,
+    Classes as BlueprintClassNames,
+} from "@blueprintjs/core";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import {ClassNames as IntentClassNames} from "../../common/Intent";
 import Icon from "./../Icon/Icon";
+import { ValidIconName } from "./../Icon/canonicalIconNames";
 
+export interface NotificationProps extends Omit<BlueprintToastProps, "message" | "action" | "icon" | "intent">, React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Extra user action elements
+     */
+    actions?: JSX.Element | JSX.Element[];
+    /**
+     * Notification message that can be used as alternative to children elements.
+     */
+    message?: JSX.Element | string;
+    /**
+     * Notification has a neutral color scheme.
+     */
+    neutral?: boolean;
+    /**
+     * Notification is a success info.
+     * This defines the colorization and the icon symbol.
+     */
+    success?: boolean;
+    /**
+     * Notification is a warning alert.
+     * This defines the colorization and the icon symbol.
+     */
+    warning?: boolean;
+    /**
+     * Notification is a danger alert.
+     * This defines the colorization and the icon symbol.
+     */
+    danger?: boolean;
+    /**
+     * Notification uses the the given space more flexible.
+     * Depracation notice: Property name will removed in futire versions.
+     * Please use `flexWidth`.
+     * @depracted
+     */
+    fullWidth?: boolean;
+    /**
+     * Notification uses the the given space more flexible.
+     * Default notifcation is displayed in min and max limits.
+     * Those limits are removed by setting this property to `true`.
+     */
+    flexWidth?: boolean;
+    /**
+     * Icon used as depiction that is displayed with the notification.
+     */
+    iconName?: ValidIconName;
+}
+
+/**
+ * Displays a notification message, optionally combined with depiction and further action buttons.
+ * By default it uses colorization of an blueish info alert.
+ */
 function Notification({
     actions,
     children,
@@ -13,11 +69,12 @@ function Notification({
     warning = false,
     danger = false,
     neutral = false,
-    fullWidth = false,
+    fullWidth = false, // deprecated
+    flexWidth = false,
     iconName = "state-info",
     timeout,
     ...otherProps
-}: any) {
+}: NotificationProps) {
     let intentLevel: string = IntentClassNames.INFO;
     let iconSymbol = iconName;
     switch (true) {
@@ -55,7 +112,8 @@ function Notification({
                 `${eccgui}-notification ` +
                 intentLevel +
                 (className ? ` ${className}` : "") +
-                (fullWidth ? ` ${eccgui}-notification--fullwidth` : "") +
+                (fullWidth ? ` ${eccgui}-notification--fullwidth` : "") + // deprecated
+                (flexWidth ? ` ${eccgui}-notification--flexwidth` : "") +
                 (otherProps.onDismiss ? "" : ` ${eccgui}-notification--static`)
             }
             message={content}

package/src/components/Notification/notification.scss

@@ -55,6 +55,7 @@
     }
 }
 
+.#{$eccgui}-notification--flexwidth,
 .#{$eccgui}-notification--fullwidth {
     min-width: 0;
     max-width: none;
@@ -77,7 +78,7 @@
     flex-grow: 0;
     flex-shrink: 0;
 
-    .#{$ns}-button {
+    .#{$ns}-button:not([class*="intent"]) {
         color: inherit;
     }
 }

package/src/components/OverviewItem/OverviewItemList.tsx

@@ -18,7 +18,7 @@ export interface OverviewItemListProps extends React.HTMLAttributes<HTMLOListEle
      * Use multiple columns.
      * Currently only lists using 1 and 2 columns are supported.
      */
-    columns?: number;
+    columns?: 1 | 2;
 }
 
 /**
@@ -42,7 +42,7 @@ function OverviewItemList({
                 (densityHigh ? `${eccgui}-overviewitem__list--highdensity ` : '') +
                 (hasDivider ? `${eccgui}-overviewitem__list--hasdivider ` : '') +
                 (hasSpacing ? `${eccgui}-overviewitem__list--hasspacing ` : '') +
-                (columns > 1 ? `${eccgui}-overviewitem__list--hascolumns ` : '') + // TODO: add number
+                (columns > 1 ? `${eccgui}-overviewitem__list--hascolumns ` : '') + // FIXME: Support numbers > 2
                 className
             }
         >

package/src/components/RadioButton/radiobutton.scss

@@ -7,6 +7,10 @@
             box-shadow: none;
         }
 
+        input:focus ~ .#{$ns}-control-indicator {
+            outline-offset: 1px;
+        }
+
         input:disabled ~ .#{$ns}-control-indicator,
         input:disabled:checked ~ .#{$ns}-control-indicator
         {

package/src/components/Spinner/Spinner.tsx

@@ -28,7 +28,7 @@ export interface SpinnerProps extends Partial<BlueprintOverlayProps & Omit<Bluep
 function Spinner({
     className = "",
     color = "inherit",
-    description = "Loading indicator", // currently unsupported (TODO)
+    description = "Loading indicator", // currently unsupported (FIXME)
     position = "local",
     size,
     stroke,

package/src/components/Switch/switch.scss

@@ -2,3 +2,4 @@
     currently not used, we need to control switch layout in
     ../Checkbox/checkbox.scss for now
 */
+// FIXME: scss styles

package/src/components/Tabs/Tab.tsx

@@ -62,7 +62,7 @@ export const transformTabProperties = ({
 
 /*
 
-TODO: Try to overload the original Tab element. Currently it does not work
+NOTE: Try to overload the original Tab element. Currently it does not work.
 (at least inside Storybook) because the set displayName is overwritten and
 Blueprints Tabs integration cannot match the new Tab element correctly by
 checking the displayName.
@@ -105,7 +105,6 @@ class Tab extends AbstractPureComponent2<TabProps> {
 }
 
 //*
-console.log(Tab.displayName);
 export default Tab;
 //*/
 

package/src/components/Tabs/Tabs.tsx

@@ -29,8 +29,6 @@ function Tabs(
         ...restProps
     }: TabsProps) {
 
-    // TODO React.Children.toArray(children).forEach((e) => {console.log(e)});
-
     return (
         <BlueprintTabs
             className={
@@ -43,9 +41,7 @@ function Tabs(
         >
             {!!tabs ? (
                 tabs.map(tab => {
-                    const e = <Tab {...transformTabProperties(tab)} />;
-                    // TODO console.log(e);
-                    return e;
+                    return <Tab {...transformTabProperties(tab)} />;
                 })
             ) : (
                 children

package/src/components/Tabs/stories/Tabs.stories.tsx

@@ -22,8 +22,8 @@ export default {
             }
         },
         /*
-        TODO: we currently cannot support tis because Blueprint set then !important
-        styles preventig tab background colors.
+        NOTE: we currently cannot support this because Blueprint set then !important
+        styles prevent tab background colors.
 
         animate: {
             description: "Whether the selected tab indicator should animate its movement.",
@@ -87,7 +87,7 @@ TabsContainerUncontrolled.args = {
 };
 
 /*
-TODO: this integration does currently not work, reason is not clear.
+FIXME: this integration does currently not work, reason is not clear. See Tab component comments at bottom.
 export const UncontrolledElementsUsage = TemplateFull.bind({});
 UncontrolledElementsUsage.args = {
     id: "storytabs2",

package/src/components/Tag/tag.scss

@@ -18,7 +18,7 @@ $tag-line-height-large: $eccgui-size-typo-tag-large; // !default;
 $tag-padding-large: ($tag-height-large - $tag-line-height-large); // !default;
 // $tag-icon-spacing: ($tag-height - 12px) / 2 !default;
 // $tag-icon-spacing-large: ($tag-height-large - $pt-icon-size-standard) / 2 !default;
-// $tag-round-adjustment: 2px !default;
+$tag-round-adjustment: 0px !default;
 
 @import "~@blueprintjs/core/src/components/tag/tag";
 

package/src/components/Toolbar/toolbar.scss

@@ -26,7 +26,7 @@
 
     .#{$eccgui}-toolbar--vertical > & {
         flex-direction: column;
-        align-items: center;
+        align-items: stretch;
     }
 }
 

package/src/components/Typography/HtmlContentBlock.tsx

@@ -2,15 +2,34 @@ import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import * as TypographyClassNames from "./classnames";
 
+// FIXME: CMEM-3742: comment + add story
+
+export interface HtmlContentBlockProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    small?: boolean;
+    /** currently not supported */
+    large?: boolean;
+    /** currently not supported */
+    muted ?: boolean;
+    /** currently not supported */
+    disabled?: boolean;
+    linebreakForced?: boolean;
+    linebreakPrevented?: boolean;
+    noScrollbarsOnChildren?: boolean;
+}
+
 function HtmlContentBlock({
     className = "",
     children,
     small = false,
-    large = false, // currently unsupported
-    muted = false, // currently unsupported
-    disabled = false, // currently unsupported
+    large = false,
+    muted = false,
+    disabled = false,
+    linebreakForced = false,
+    linebreakPrevented = false,
+    noScrollbarsOnChildren = false,
     ...otherProps
-}: any) {
+}: HtmlContentBlockProps) {
     return (
         <div
             className={
@@ -19,8 +38,12 @@ function HtmlContentBlock({
                 (small ? " " + TypographyClassNames.SMALL : "") +
                 (large ? " " + TypographyClassNames.LARGE : "") +
                 (muted ? " " + TypographyClassNames.MUTED : "") +
+                (linebreakForced ? " " + TypographyClassNames.FORCELINEBREAK : "") +
+                (linebreakPrevented ? " " + TypographyClassNames.PREVENTLINEBREAK : "") +
+                (noScrollbarsOnChildren ? " " + TypographyClassNames.NOSCROLLBARSONCHILDREN : "") +
                 (disabled ? " " + TypographyClassNames.DISABLED : "")
             }
+            {...otherProps}
         >
             {children}
         </div>

package/src/components/Typography/classnames.ts

@@ -4,6 +4,7 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 export const NOOVERFLOW = eccgui + "-typography--nooverflow";
 export const FORCELINEBREAK = eccgui + "-typography--forcelinebreak";
 export const PREVENTLINEBREAK = eccgui + "-typography--preventlinebreak";
+export const NOSCROLLBARSONCHILDREN = eccgui + "-typography--noscrollbarsonchildren";
 export const LARGE = eccgui + "-typography--large";
 export const SMALL = eccgui + "-typography--small";
 export const MUTED = eccgui + "-typography--muted";

package/src/components/Typography/typography.scss

@@ -261,6 +261,14 @@ table {
     white-space: nowrap;
 }
 
+.#{$eccgui}-typography--noscrollbarsonchildren * {
+    overflow: visible;
+
+    pre {
+        width: fit-content;
+    }
+}
+
 // white spaces
 @each $whitespacePlace in ("margin", "padding") {
     @each $whitespaceDirection in ("top", "right", "bottom", "left") {

package/src/extensions/react-flow/_react-flow.scss

@@ -3,3 +3,7 @@
 @import "edges/edges";
 @import "handles/handles";
 @import "minimap/minimap";
+
+.react-flow__background {
+    border: solid 1px $eccgui-color-separation-divider;
+}

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

@@ -67,7 +67,6 @@ export const EdgeDefault = memo(
                 <path
                     d={pathDisplay}
                     className="react-flow__edge-path"
-
                     markerEnd={markerEnd}
                 />
                 { edgeLabel }

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

@@ -0,0 +1,118 @@
+/**
+ * Copied from `react-flow` because we need to change there routing.
+ * We use the 10.2.0cversion minus commit 87d518f8b5540a91a3f9c163a2315c2de47abc31
+ * @see https://github.com/wbkd/react-flow/commit/87d518f8b5540a91a3f9c163a2315c2de47abc31
+ */
+
+import { getEdgeCenter as getCenter, Position } from "react-flow-renderer";
+
+// These are some helper methods for drawing the round corners
+// The name indicates the direction of the path. "bottomLeftCorner" goes
+// from bottom to the left and "leftBottomCorner" goes from left to the bottom.
+// We have to consider the direction of the paths because of the animated lines.
+const bottomLeftCorner = (x: number, y: number, size: number): string =>
+    `L ${x},${y - size}Q ${x},${y} ${x + size},${y}`;
+const leftBottomCorner = (x: number, y: number, size: number): string =>
+    `L ${x + size},${y}Q ${x},${y} ${x},${y - size}`;
+const bottomRightCorner = (x: number, y: number, size: number): string =>
+    `L ${x},${y - size}Q ${x},${y} ${x - size},${y}`;
+const rightBottomCorner = (x: number, y: number, size: number): string =>
+    `L ${x - size},${y}Q ${x},${y} ${x},${y - size}`;
+const leftTopCorner = (x: number, y: number, size: number): string => `L ${x + size},${y}Q ${x},${y} ${x},${y + size}`;
+const topLeftCorner = (x: number, y: number, size: number): string => `L ${x},${y + size}Q ${x},${y} ${x + size},${y}`;
+const topRightCorner = (x: number, y: number, size: number): string => `L ${x},${y + size}Q ${x},${y} ${x - size},${y}`;
+const rightTopCorner = (x: number, y: number, size: number): string => `L ${x - size},${y}Q ${x},${y} ${x},${y + size}`;
+
+export interface GetSmoothStepPathParams {
+    sourceX: number;
+    sourceY: number;
+    sourcePosition?: Position;
+    targetX: number;
+    targetY: number;
+    targetPosition?: Position;
+    borderRadius?: number;
+    centerX?: number;
+    centerY?: number;
+}
+
+export function getSmoothStepPath({
+    sourceX,
+    sourceY,
+    sourcePosition = Position.Bottom,
+    targetX,
+    targetY,
+    targetPosition = Position.Top,
+    borderRadius = 5,
+    centerX,
+    centerY,
+}: GetSmoothStepPathParams): string {
+    const [_centerX, _centerY, offsetX, offsetY] = getCenter({ sourceX, sourceY, targetX, targetY });
+    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;
+
+    let firstCornerPath = "";
+    let secondCornerPath = "";
+
+    if (sourceX <= targetX) {
+        if (sourceY <= targetY) {
+            firstCornerPath = bottomLeftCorner(sourceX, cY, cornerSize);
+            secondCornerPath = rightTopCorner(targetX, cY, cornerSize);
+            if (sourcePosition === Position.Right) {
+                if (targetPosition === Position.Left) {
+                    firstCornerPath = rightTopCorner(cX, sourceY, cornerSize);
+                    secondCornerPath = bottomLeftCorner(cX, targetY, cornerSize);
+                }
+            } else {
+                if (targetPosition === Position.Left) {
+                    // no change
+                }
+            }
+        } else {
+            firstCornerPath = topLeftCorner(sourceX, cY, cornerSize);
+            secondCornerPath = rightBottomCorner(targetX, cY, cornerSize);
+            if (sourcePosition === Position.Right) {
+                if (targetPosition === Position.Left) {
+                    firstCornerPath = rightBottomCorner(cX, sourceY, cornerSize);
+                    secondCornerPath = topLeftCorner(cX, targetY, cornerSize);
+                }
+            } else {
+                if (targetPosition === Position.Left) {
+                    // no change
+                }
+            }
+        }
+    } else {
+        if (sourceY <= targetY) {
+            firstCornerPath = bottomRightCorner(sourceX, cY, cornerSize);
+            secondCornerPath = leftTopCorner(targetX, cY, cornerSize);
+            if (sourcePosition === Position.Left) {
+                if (targetPosition === Position.Right) {
+                    firstCornerPath = leftTopCorner(cX, sourceY, cornerSize);
+                    secondCornerPath = bottomRightCorner(cX, targetY, cornerSize);
+                }
+            } else {
+                if (targetPosition === Position.Right) {
+                    // no change
+                }
+            }
+        } else {
+            firstCornerPath = topRightCorner(sourceX, cY, cornerSize);
+            secondCornerPath = leftBottomCorner(targetX, cY, cornerSize);
+            if (sourcePosition === Position.Left) {
+                if (targetPosition === Position.Right) {
+                    firstCornerPath = leftBottomCorner(cX, sourceY, cornerSize);
+                    secondCornerPath = topRightCorner(cX, targetY, cornerSize);
+                }
+            } else {
+                if (targetPosition === Position.Right) {
+                    // no change
+                }
+            }
+        }
+    }
+
+    return `M ${sourceX},${sourceY}${firstCornerPath}${secondCornerPath}L ${targetX},${targetY}`;
+}

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

@@ -1,6 +1,7 @@
 import { EdgeDefaultProps } from "./EdgeDefault";
 import { EdgeStepProps } from "./EdgeStep";
-import { getSmoothStepPath, Position } from "react-flow-renderer";
+import { Position } from "react-flow-renderer";
+import { getSmoothStepPath } from "./getSmoothStepPath";
 
 interface EdgePositionCorrectionProps extends Omit<EdgeDefaultProps, "id" | "source" | "target" | "drawSvgPath" | "data"> {
     correctionLength?: number;
@@ -25,58 +26,49 @@ const posCorrectionEdge = ({
     let endCommandCorrection = ``;
 
     if (sourcePosition === Position.Left && sourceX < targetX) {
-        newSourceX = newSourceX - correctionLength;
+        newSourceX = newSourceX - 2 * correctionLength;
         if (sourceY < targetY) {
-            newSourceY = sourceY + 2 * correctionRadius;
-            startCommandCorrection = startCommandCorrection + ` L ${newSourceX},${sourceY} A ${correctionRadius} ${correctionRadius} ${180} ${1} ${0} `;
+            newSourceY = sourceY + correctionRadius;
+            startCommandCorrection = startCommandCorrection + ` L ${newSourceX + correctionRadius},${sourceY} A ${correctionRadius} ${correctionRadius} ${90} ${0} ${0} `;
         } else {
-            newSourceY = sourceY - 2 * correctionRadius;
-            startCommandCorrection = startCommandCorrection + ` L ${newSourceX},${sourceY} A ${correctionRadius} ${correctionRadius} ${180} ${1} ${1} `;
+            newSourceY = sourceY - correctionRadius;
+            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;
         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} `
-            );
+            newSourceY = sourceY + correctionRadius;
+            startCommandCorrection = startCommandCorrection + ` L ${newSourceX - correctionRadius},${sourceY} A ${correctionRadius} ${correctionRadius} ${90} ${0} ${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} `
-            );
+            newSourceY = sourceY - correctionRadius;
+            startCommandCorrection = startCommandCorrection + ` L ${newSourceX - correctionRadius},${sourceY} A ${correctionRadius} ${correctionRadius} ${90} ${0} ${0} `;
         }
     }
 
     if (targetPosition === Position.Left && sourceX > targetX) {
-        newTargetX = newTargetX - correctionLength;
+        newTargetX = newTargetX - 3 * correctionLength;
         if (sourceY < targetY) {
-            newTargetY = targetY - 2 * correctionRadius;
-            endCommandCorrection = ` A ${correctionRadius} ${correctionRadius} ${180} ${1} ${0} ${newTargetX},${targetY} L ${targetX},${targetY}`;
+            newTargetY = targetY - correctionRadius;
+            endCommandCorrection = ` A ${correctionRadius} ${correctionRadius} ${90} ${0} ${0} ${newTargetX + correctionRadius},${targetY} L ${targetX},${targetY}`;
         } else {
-            newTargetY = targetY + 2 * correctionRadius;
-            endCommandCorrection = ` A ${correctionRadius} ${correctionRadius} ${180} ${1} ${1} ${newTargetX},${targetY} L ${targetX},${targetY}`;
+            newTargetY = targetY + correctionRadius;
+            endCommandCorrection = ` A ${correctionRadius} ${correctionRadius} ${90} ${0} ${1} ${newTargetX + correctionRadius},${targetY} L ${targetX},${targetY}`;
         }
     }
 
     if (targetPosition === Position.Right && sourceX < targetX) {
-        newTargetX = newTargetX + correctionLength;
+        newTargetX = newTargetX + 3 * correctionLength;
         if (sourceY < targetY) {
-            newTargetY = targetY - 2 * correctionRadius;
-            endCommandCorrection = ` A ${correctionRadius} ${correctionRadius} ${180} ${1} ${1} ${newTargetX},${targetY} L ${targetX},${targetY}`;
+            newTargetY = targetY - correctionRadius;
+            endCommandCorrection = ` A ${correctionRadius} ${correctionRadius} ${90} ${0} ${1} ${newTargetX - correctionRadius},${targetY} L ${targetX},${targetY}`;
         } else {
-            newTargetY = targetY + 2 * correctionRadius;
-            endCommandCorrection = ` A ${correctionRadius} ${correctionRadius} ${180} ${1} ${0} ${newTargetX},${targetY} L ${targetX},${targetY}`;
+            newTargetY = targetY + correctionRadius;
+            endCommandCorrection = ` A ${correctionRadius} ${correctionRadius} ${90} ${0} ${0} ${newTargetX - correctionRadius},${targetY} L ${targetX},${targetY}`;
         }
     }
 
-
     return {
         newSourceX,
         newSourceY,