Merge pull request #6 from CarstenWickner/compatibility-fixes

Author: CarstenWickner

.storybook/webpack.config.js

@@ -16,7 +16,12 @@ module.exports = async ({ config }) => {
         test: /\.tsx?$/,
         use: [
             {
-                loader: "awesome-typescript-loader"
+                loader: "awesome-typescript-loader",
+                options: {
+                    useBabel: true,
+                    babelOptions: { presets: ["@babel/env"] },
+                    babelCore: "@babel/core"
+                }
             }, {
                 loader: "react-docgen-typescript-loader",
                 options: {

src/component/FlowModeler.scss

@@ -67,7 +67,7 @@
         }
         & .arrow,
         & .stroke-horizontal,
-        & .stroke-vertical > *,
+        & .stroke-vertical::before,
         & .centered-line-wrapper::before {
             background-color: $strokeColor;
         }
@@ -77,7 +77,7 @@
             position: relative;
             margin-right: $arrowSize;
 
-            &:after {
+            &::after {
                 content: "";
                 height: 0;
                 width: 0;
@@ -103,22 +103,27 @@
             }
         }
         & .stroke-vertical {
+            position: relative;
             display: flex;
             flex-direction: column;
             align-self: stretch;
             width: $strokeStrength;
-            & .center {
-                height: $strokeStrength;
+            &::before {
+                position: absolute;
+                content: "";
                 width: $strokeStrength;
             }
-            & .top,
-            & .bottom {
-                flex-grow: 1;
-                width: $strokeStrength;
+            &.top-half::before {
+                height: calc(50% + #{$strokeStrength / 2});
+                top: 0;
+            }
+            &.full-height::before {
+                height: 100%;
+                top: 0;
             }
-            &.bottom-half .top,
-            &.top-half .bottom {
-                background-color: transparent;
+            &.bottom-half::before {
+                height: calc(50% + #{$strokeStrength / 2});
+                bottom: 0;
             }
             & + .arrow {
                 margin-left: -$strokeStrength;

src/component/HorizontalStroke.tsx

@@ -36,25 +36,12 @@ export class HorizontalStroke extends React.Component<
         }
     }
 
-    renderVerticalStroke(connectionType: ConnectionType, classNameSuffix: string): React.ReactNode {
-        if (connectionType) {
-            return (
-                <div className={`stroke-vertical ${getConnectionClassName(connectionType)}${classNameSuffix}`}>
-                    <div className="top" />
-                    <div className="center" />
-                    <div className="bottom" />
-                </div>
-            );
-        }
-        return null;
-    }
-
     render(): React.ReactNode {
         const { className, incomingConnection, outgoingConnection, children } = this.props;
         const classNameSuffix = className ? ` ${className}` : "";
         return (
             <>
-                {this.renderVerticalStroke(incomingConnection, classNameSuffix)}
+                {incomingConnection && <div className={`stroke-vertical ${getConnectionClassName(incomingConnection)}${classNameSuffix}`} />}
                 {!children && <div className={`stroke-horizontal${classNameSuffix}`} />}
                 {children && (
                     <div className={`centered-line-wrapper${classNameSuffix}`}>
@@ -67,7 +54,7 @@ export class HorizontalStroke extends React.Component<
                         />
                     </div>
                 )}
-                {this.renderVerticalStroke(outgoingConnection, classNameSuffix)}
+                {outgoingConnection && <div className={`stroke-vertical ${getConnectionClassName(outgoingConnection)}${classNameSuffix}`} />}
             </>
         );
     }