fix: adjust styles as workaround for unknown grid cell height in chrome

Author: CarstenWickner

src/component/FlowModeler.scss

@@ -10,7 +10,7 @@
     $strokeColor: #01579b;
     $strokeStrength: 0.25em;
     $arrowSize: 1.5 * $strokeStrength;
-    $strokeLength: 2em - $arrowSize;
+    $strokeLength: 1.5em - $arrowSize;
     $standardElementSize: 2.5em;
     $gatewayElementSizeFactor: 2;
     $gatewayElementMargin: (sqrt($gatewayElementSizeFactor * $gatewayElementSizeFactor * 2) - $gatewayElementSizeFactor) * 1em / 2;
@@ -67,7 +67,8 @@
         }
         & .arrow,
         & .stroke-horizontal,
-        & .stroke-vertical {
+        & .stroke-vertical > *,
+        & .centered-line-wrapper::before {
             background-color: $strokeColor;
         }
         & .arrow {
@@ -92,7 +93,7 @@
         & .stroke-horizontal {
             height: $strokeStrength;
             min-width: $strokeLength;
-            flex-grow: 1;
+            flex: 1 0 auto;
 
             &.converging-gateway {
                 min-width: $gatewayElementMargin;
@@ -102,42 +103,50 @@
             }
         }
         & .stroke-vertical {
+            display: flex;
+            flex-direction: column;
+            align-self: stretch;
             width: $strokeStrength;
-            &.full-height {
-                height: 100%;
+            & .center {
+                height: $strokeStrength;
+                width: $strokeStrength;
             }
-            &.bottom-half,
-            &.top-half {
-                height: calc(50% + #{$strokeStrength / 2});
-            }
-            &.bottom-half {
-                margin-top: auto;
+            & .top,
+            & .bottom {
+                flex-grow: 1;
+                width: $strokeStrength;
             }
-            &.top-half {
-                margin-bottom: auto;
+            &.bottom-half .top,
+            &.top-half .bottom {
+                background-color: transparent;
             }
             & + .arrow {
                 margin-left: -$strokeStrength;
             }
         }
         & .centered-line-wrapper {
+            position: relative;
             display: flex;
             flex-direction: column;
             flex-grow: 1;
-    
-            & .wrapper-top-label,
-            & .wrapper-bottom-spacing {
-                flex-grow: 1;
-            }
+
             & .wrapper-top-label {
                 display: flex;
                 flex-direction: column;
                 justify-content: flex-end;
                 align-content: center;
                 padding: 0 0.25em;
+                margin-bottom: $strokeStrength / 2;
             }
-            & .stroke-horizontal {
-                flex-grow: 0;
+            &::before {
+                position: absolute;
+                content: "";
+                height: $strokeStrength;
+                width: 100%;
+                top: calc(50% - #{$strokeStrength / 2});
+            }
+            & .wrapper-bottom-spacing {
+                margin-top: $strokeStrength / 2;
             }
         }
     }

src/component/FlowModeler.tsx

@@ -54,7 +54,7 @@ export class FlowModeler extends React.Component<FlowModelerProps> {
             case ElementType.ConnectElementToGateway:
                 return <HorizontalStroke outgoingConnection={cellData.connectionType} />;
             case ElementType.StrokeExtension:
-                return <div className="stroke-horizontal" />;
+                return <div className="stroke-horizontal optional" />;
             case ElementType.End:
                 return (
                     <>

src/component/HorizontalStroke.tsx

@@ -36,26 +36,38 @@ 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 (
             <>
-                {incomingConnection && <div className={`stroke-vertical ${getConnectionClassName(incomingConnection)}${classNameSuffix}`} />}
+                {this.renderVerticalStroke(incomingConnection, classNameSuffix)}
                 {!children && <div className={`stroke-horizontal${classNameSuffix}`} />}
                 {children && (
                     <div className={`centered-line-wrapper${classNameSuffix}`}>
-                        <div className="wrapper-top-label" ref={this.topLabelRef}>
-                            {children}
+                        <div className="wrapper-top-label">
+                            <div ref={this.topLabelRef}>{children}</div>
                         </div>
-                        <div className={`stroke-horizontal${classNameSuffix}`} />
                         <div
                             className="wrapper-bottom-spacing"
-                            style={(this.topLabelRef.current && { height: `${this.state.wrapperTopHeight}px` }) || undefined}
+                            style={(this.topLabelRef.current && { minHeight: `${this.state.wrapperTopHeight}px` }) || undefined}
                         />
                     </div>
                 )}
-                {outgoingConnection && <div className={`stroke-vertical ${getConnectionClassName(outgoingConnection)}${classNameSuffix}`} />}
+                {this.renderVerticalStroke(outgoingConnection, classNameSuffix)}
             </>
         );
     }

test/component/HorizontalStroke.test.tsx

@@ -55,16 +55,17 @@ describe("applies given className", () => {
         );
         expect(component.find(".stroke-vertical.bottom-half.test-class").exists()).toBe(true);
         expect(component.find(".centered-line-wrapper.test-class").exists()).toBe(true);
-        expect(component.find(".stroke-horizontal.test-class").exists()).toBe(true);
-        expect(component.find(".centered-line-wrapper.test-class .stroke-horizontal.test-class").exists()).toBe(true);
+        expect(component.find(".stroke-horizontal.test-class").exists()).toBe(false);
     });
     it("for outgoing connection", () => {
         const component = shallow(<HorizontalStroke className="test-class" outgoingConnection={ConnectionType.Last} />);
+        expect(component.find(".centered-line-wrapper.test-class").exists()).toBe(false);
         expect(component.find(".stroke-horizontal.test-class").exists()).toBe(true);
         expect(component.find(".stroke-vertical.top-half.test-class").exists()).toBe(true);
     });
     it("when there is no connection", () => {
         const component = shallow(<HorizontalStroke className="test-class" outgoingConnection={ConnectionType.Last} />);
+        expect(component.find(".centered-line-wrapper.test-class").exists()).toBe(false);
         expect(component.find(".stroke-horizontal.test-class").exists()).toBe(true);
     });
 });

test/component/__snapshots__/HorizontalStroke.test.tsx.snap

@@ -8,16 +8,15 @@ exports[`renders correctly for incomingConnection = single 1`] = `
     <div
       className="wrapper-top-label"
     >
-      text
+      <div>
+        text
+      </div>
     </div>
-    <div
-      className="stroke-horizontal"
-    />
     <div
       className="wrapper-bottom-spacing"
       style={
         Object {
-          "height": "30px",
+          "minHeight": "30px",
         }
       }
     />
@@ -33,11 +32,10 @@ exports[`renders correctly with minimal/default props 1`] = `
     <div
       className="wrapper-top-label"
     >
-      label
+      <div>
+        label
+      </div>
     </div>
-    <div
-      className="stroke-horizontal"
-    />
     <div
       className="wrapper-bottom-spacing"
     />